@media screen and (min-width: 1201px) {
  .responsive-menu {
    display: none !important;
    visibility: hidden !important;
  }

  .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
  }

  .navbar,
  .navbar.fixed-top {
    z-index: 99999 !important; 
  }
}

  html body div.navbar-info-bar {
    font-size: 0.95rem !important; 
    padding: 12px 8px !important; 
    width: auto !important; 
    height: auto !important; 
  }

  html body div.navbar-info-bar span#current-date,
  html body div.navbar-info-bar span#current-time,
  html body div.navbar-info-bar div.datetime-info,
  html body div.navbar-info-bar div.trm-info,
  html body div.navbar-info-bar div.trm-value,
  html body div.navbar-info-bar .trm-value {
    font-size: 0.95rem !important;
  }

  html body div.navbar-info-bar i.info-icon {
    font-size: 0.85rem !important;
  }

  html body div.navbar-info-bar * {
    font-size: 0.95rem !important;
  }

@media (max-width: 1366px) and (min-width: 1201px) {
  html body div.navbar-info-bar {
    padding: 12px 8px !important; 
    width: auto !important;
    height: auto !important;
    font-size: 0.95rem !important;
  }
}

@media (min-width: 1367px) {
  html body div.navbar-info-bar {
    padding: 12px 8px !important; 
    width: auto !important;
    height: auto !important;
    font-size: 0.95rem !important;
  }
}

html body div.tab-carousel-wrapper,
html body ul#myTabServices.nav.nav-tabs,
html body #myTabServices {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  margin: 20px auto !important;
}

@media (max-width: 1200px) {
  /* OCULTAR MENÚ DESKTOP en todas las resoluciones menores a 1201px */
  body .navbar-element-independent,
  body .navbar-element-independent[style],
  body div.navbar-element-independent,
  body div.navbar-element-independent[style],
  body .navbar .navbar-element-independent,
  body #myNavbar .navbar-element-independent,
  body .container-fluid .navbar-element-independent,
  html body .navbar-element-independent,
  html body div.navbar-element-independent {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Ocultar también los elementos hijos */
  body .navbar-element-independent *,
  body .navbar-element-independent a,
  body .navbar-element-independent .nav-link {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .navbar-logo-independent * {
    box-sizing: border-box !important;
  }

  .navbar-logo-independent .logo-coin-container {
    transform: none !important;
    transform-origin: unset !important;
    width: auto !important;
    height: auto !important;
  }

  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img {
    object-fit: contain !important;
    border-radius: inherit !important;
    width: auto !important;
    height: auto !important;
  }

  .navbar-logo-independent {
    width: auto !important;
    height: auto !important;
  }
}

.tab-carousel-wrapper[style*="display: none"],
#myTabServices[style*="display: none"],
.tab-carousel-wrapper[style*="visibility: hidden"],
#myTabServices[style*="visibility: hidden"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tab-carousel-wrapper,
#myTabServices,
ul#myTabServices.nav.nav-tabs {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1000 !important;
}

.navbar-info-bar #current-date,
.navbar-info-bar #current-time,
.navbar-info-bar .datetime-info,
.navbar-info-bar .datetime-info *,
.navbar-info-bar .info-section,
.navbar-info-bar .info-section * {
  font-size: inherit !important;
}

@media screen and (max-width: 1200px) and (min-width: 769px) {

  .navbar-info-bar {
    width: 350px !important;
    height: 40px !important;
    font-size: 0.6rem !important;
    
    position: fixed !important;
    top: 15px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 4000 !important;
  }

  .navbar-info-bar #current-date,
  .navbar-info-bar #current-time {
    font-size: 0.6rem !important;
  }

  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info {
    font-size: 0.6rem !important;
    gap: 3px !important;
  }

  .navbar-info-bar .info-icon {
    font-size: 0.5rem !important;
  }

  .navbar-info-bar .trm-value {
    font-size: 0.6rem !important;
  }

  .navbar-element-independent {
    display: none !important;
    visibility: hidden !important;
  }

  /* 🎯 LOGO.GIF - CONTROLES TABLET (769px-1200px) */
  
  /* Contenedor del logo - POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 50px !important;              /* ← 🔧 EJE X: Posición horizontal (30px, 50px, 70px...) */
    top: 50% !important;                /* ← 🔧 EJE Y: Posición vertical (40%, 50%, 60%...) */
    transform: translateY(-50%) !important;
    z-index: 15 !important;
    overflow: visible !important;
  }

  /* Logo.gif - TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img {
    width: 280px !important;            /* ← 🔧 ANCHO: Solo el ancho (200px, 280px, 350px...) */
    height: 80px !important;            /* ← 🔧 ALTO: Solo la altura (60px, 80px, 100px...) */
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .navbar-logo-independent .shine-overlay {
    max-width: 280px !important;
    max-height: 80px !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(45deg, transparent 20%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 70%, transparent 80%) !important;
    animation: logo-shine 30s infinite !important;
  }

  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 5000 !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 8px !important;
    width: 45px !important;
    height: 45px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  }

  /* Contenedor del menú de vinculos con animaciones - posicionado debajo del botón hamburguesa */
  .navbar-collapse {
    position: fixed !important;

    /* ========================================
       CONTROL EJE Y (VERTICAL)
       ======================================== */
    top: 170px !important;              /* ← EJE Y: Distancia desde el borde superior de la ventana. Aumenta para bajar, disminuye para subir */

    /* ========================================
       CONTROL EJE X (HORIZONTAL)
       ======================================== */
    right: 350px !important;             /* ← EJE X: Distancia desde el borde derecho de la ventana. Aumenta para mover a la izquierda, disminuye para mover a la derecha */
    left: auto !important;              /* ← Desactiva el posicionamiento desde la izquierda */

    /* ========================================
       ANCHO Y Z-INDEX
       ======================================== */
    width: 300px !important;            /* ← ANCHO: Controla el ancho del menú desplegable */
    z-index: 4999 !important;           /* ← Z-INDEX: Debe ser menor que el botón hamburguesa (5000) para que el botón esté encima */

    /* Estilos por defecto (oculto) */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    /* Transiciones suaves */
    transition: max-height 0.3s ease-in-out,
                padding 0.3s ease-in-out,
                background-color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out !important;
  }

  /* Aplicar estilos visuales y animación cuando el menú está abierto */
  .navbar-collapse.show {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    max-height: 600px !important;
    overflow: visible !important;
    z-index: 4999 !important;
  }

  /* Menú responsive con animación de fade y retraso */
  .responsive-menu {
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    transform: translateY(-15px) !important;
    /* Transición suave con retraso para el fade-in */
    transition: opacity 0.25s ease-in-out 0.15s,
                transform 0.25s ease-in-out 0.15s,
                visibility 0s linear 0s !important;
  }

  /* MOSTRAR el menú responsive con animación cuando está abierto */
  .navbar-collapse.show .responsive-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* Aplicar el delay solo en la apertura */
    transition: opacity 0.25s ease-in-out 0.15s,
                transform 0.25s ease-in-out 0.15s,
                visibility 0s linear 0s !important;
  }

  /* Al cerrar, sin delay para que desaparezca rápido */
  .navbar-collapse:not(.show) .responsive-menu {
    transition: opacity 0.15s ease-in-out 0s,
                transform 0.15s ease-in-out 0s,
                visibility 0s linear 0.15s !important;
  }

  .responsive-menu .nav-item {
    margin: 5px 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .responsive-menu .nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
    color: var(--gep-dark-blue) !important;
    text-decoration: none !important;
  }

  .responsive-menu .nav-link:hover {
    color: var(--gep-blue) !important;
    background-color: rgba(240, 240, 240, 0.5) !important;
    border-radius: 5px !important;
  }

  .responsive-menu .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(245, 245, 245, 0.8) !important;
  }

  .responsive-menu .dropdown-item {
    text-align: center !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    color: var(--gep-dark-blue) !important;
  }

  .tab-carousel-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 30px auto !important;
    max-width: 90% !important;
    width: 90% !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  ul#myTabServices.nav.nav-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.2rem !important;
    margin: 20px auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1001 !important;
  }

  #myTabServices .nav-item {
    display: block !important;
    visibility: visible !important;
  }

  #myTabServices .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    margin: 0 5px !important;
    visibility: visible !important;
  }

  #myTabServices .icon,
  #myTabServices svg.icon {
    width: 35px !important;
    height: 35px !important;
    display: block !important;
    visibility: visible !important;
  }
}

@media screen and (max-width: 768px) {

  .navbar-info-bar {
    width: 280px !important;
    height: 35px !important;
    font-size: 0.5rem !important;
    
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 4000 !important;
  }

  .navbar-info-bar #current-date,
  .navbar-info-bar #current-time {
    font-size: 0.5rem !important;
  }

  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info {
    font-size: 0.5rem !important;
    gap: 2px !important;
  }

  .navbar-info-bar .info-icon {
    font-size: 0.4rem !important;
  }

  .navbar-info-bar .trm-value {
    font-size: 0.5rem !important;
  }

  .navbar-element-independent {
    display: none !important;
    visibility: hidden !important;
  }

  /* 🎯 LOGO.GIF - CONTROLES MÓVIL (≤768px) */
  
  /* Contenedor del logo - POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  #LogoCoinContainer {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 20px !important;              /* ← 🔧 EJE X: Posición horizontal (10px, 20px, 30px...) */
    top: 50% !important;                /* ← 🔧 EJE Y: Posición vertical (40%, 50%, 60%...) */
    transform: translateY(-50%) !important;
    z-index: 15 !important;
    overflow: visible !important;
  }

  /* Logo.gif - TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img,
  .navbar-logo-independent img.d-inline-block,
  .navbar-logo-independent img.align-middle,
  #LogoGifMain.d-inline-block,
  #LogoGifMain.align-middle,
  img#LogoGifMain {
    width: 200px !important;            /* ← 🔧 ANCHO: Solo el ancho (150px, 200px, 250px...) */
    height: 60px !important;            /* ← 🔧 ALTO: Solo la altura (50px, 60px, 70px...) */
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .navbar-logo-independent .shine-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .navbar-logo-independent {
    overflow: visible !important;
  }

  .navbar-logo-center-independent {
    left: 50% !important;
    top: 30% !important;
    transform: translate(-50%, -50%) !important;
  }

  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 70px !important;
    right: 15px !important;
    z-index: 5000 !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 6px !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  }

  /* Contenedor del menú con animaciones - posicionado debajo del botón hamburguesa */
  .navbar-collapse {
    position: fixed !important;

    /* ========================================
       CONTROL EJE Y (VERTICAL)
       ======================================== */
    top: 120px !important;              /* ← EJE Y: Distancia desde el borde superior de la ventana. Aumenta para bajar, disminuye para subir */

    /* ========================================
       CONTROL EJE X (HORIZONTAL)
       ======================================== */
    right: 15px !important;             /* ← EJE X: Distancia desde el borde derecho de la ventana. Aumenta para mover a la izquierda, disminuye para mover a la derecha */
    left: auto !important;              /* ← Desactiva el posicionamiento desde la izquierda */

    /* ========================================
       ANCHO Y Z-INDEX
       ======================================== */
    width: 260px !important;            /* ← ANCHO: Controla el ancho del menú desplegable */
    z-index: 4999 !important;           /* ← Z-INDEX: Debe ser menor que el botón hamburguesa (5000) para que el botón esté encima */

    /* Estilos por defecto (oculto) */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    /* Transiciones suaves */
    transition: max-height 0.3s ease-in-out,
                padding 0.3s ease-in-out,
                background-color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out !important;
  }

  /* Aplicar estilos visuales y animación cuando el menú está abierto */
  .navbar-collapse.show {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    max-height: 600px !important;
    overflow: visible !important;
    z-index: 4999 !important;
  }

  /* Menú responsive con animación de fade y retraso */
  .responsive-menu {
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    transform: translateY(-15px) !important;
    /* Transición suave con retraso para el fade-in */
    transition: opacity 0.25s ease-in-out 0.15s,
                transform 0.25s ease-in-out 0.15s,
                visibility 0s linear 0s !important;
  }

  /* MOSTRAR el menú responsive con animación cuando está abierto */
  .navbar-collapse.show .responsive-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* Aplicar el delay solo en la apertura */
    transition: opacity 0.25s ease-in-out 0.15s,
                transform 0.25s ease-in-out 0.15s,
                visibility 0s linear 0s !important;
  }

  /* Al cerrar, sin delay para que desaparezca rápido */
  .navbar-collapse:not(.show) .responsive-menu {
    transition: opacity 0.15s ease-in-out 0s,
                transform 0.15s ease-in-out 0s,
                visibility 0s linear 0.15s !important;
  }

  .responsive-menu .nav-item {
    margin: 3px 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .responsive-menu .nav-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    color: var(--gep-dark-blue) !important;
    text-decoration: none !important;
  }

  .responsive-menu .nav-link:hover {
    color: var(--gep-blue) !important;
    background-color: rgba(240, 240, 240, 0.5) !important;
    border-radius: 5px !important;
  }

  .responsive-menu .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgba(245, 245, 245, 0.8) !important;
  }

  .responsive-menu .dropdown-item {
    text-align: center !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    color: var(--gep-dark-blue) !important;
  }

  #myTabServices {
    font-size: 1rem !important;
    margin: 15px auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #myTabServices .nav-link {
    padding: 6px 8px !important;
    margin: 2px !important;
  }

  #myTabServices .icon {
    width: 25px !important;
    height: 25px !important;
  }

  .tab-carousel-wrapper {
    margin: 20px auto !important;
    max-width: 95% !important;
    overflow-x: auto !important;
  }
}

/* ===================================================================
   BREAKPOINT ESPECÍFICO PARA RESOLUCIÓN 698px (691px - 700px)
   Control preciso de logo_nombre.png para ventana 698 x 858
   =================================================================== */
@media screen and (max-width: 700px) and (min-width: 691px) {

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado, aumenta % para mover a la derecha, disminuye para izquierda */
    top: 50% !important;                /* ← EJE Y - Posicion vertical: Aumenta % para bajar, disminuye % para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img {
    max-height: 250px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 350px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent {
    position: absolute !important;
    left: 15px !important;              /* ← EJE X - Posición horizontal: Distancia desde el borde izquierdo */
    top: 50% !important;                /* ← EJE Y - Posición vertical: 50% = centrado vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  .navbar-logo-independent .logo-coin-container {
    max-width: 260px !important;
    max-height: 65px !important;
    width: auto !important;
    height: auto !important;
  }

  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img {
    max-width: 260px !important;
    max-height: 65px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 45px !important;               /* ← SUBIR/BAJAR: Usa PIXELES para posición fija */
    right: 14px !important;             /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

@media screen and (max-width: 576px) {

  .container-fluid[style*="height: 160px"] {
    height: 120px !important;
    min-height: 120px !important;
  }

  .navbar-info-bar {
    width: auto !important;          
    min-width: 200px !important;     
    max-width: 320px !important;     
    height: auto !important;         
    min-height: 30px !important;     
    font-size: 0.45rem !important;   
    padding: 4px 8px !important;     
    top: 5px !important;             
    overflow: hidden !important;     
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;  
    box-sizing: border-box !important; 
    flex-shrink: 0 !important;       
  }

  .navbar-info-bar #current-date,
  .navbar-info-bar #current-time {
    font-size: 0.38rem !important;   
    line-height: 1.2 !important;     
    white-space: nowrap !important;  
    margin: 0 !important;            
    padding: 0 !important;           
    display: inline-block !important; 
    max-width: 100% !important;      
    overflow: hidden !important;     
    text-overflow: ellipsis !important; 
  }

  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info {
    font-size: 0.5rem !important;    
    gap: 4px !important;             
    line-height: 1.2 !important;     
    margin: 2px 0 !important;        
  }

  .navbar-info-bar .info-icon {
    font-size: 0.45rem !important;   
  }

  .navbar-info-bar .trm-value {
    font-size: 0.5rem !important;    
    line-height: 1.2 !important;     
  }

  .navbar-info-bar * {
    font-size: 0.5rem !important;    
    line-height: 1.2 !important;     
  }

  .navbar-info-bar .info-section {
    gap: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar-logo-center-independent {
    top: 80% !important;  
  }

  .navbar-logo-independent .logo-coin-container {
    max-width: 160px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
  }

  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img {
    max-width: 160px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .navbar-logo-independent .shine-overlay {
    max-width: 160px !important;
    max-height: 50px !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(45deg, transparent 20%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 70%, transparent 80%) !important;
    animation: logo-shine 30s infinite !important;
  }

  .navbar-logo-independent {
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
  }

  #myTabServices {
    font-size: 0.9rem !important;
    margin: 10px auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #myTabServices .nav-link {
    padding: 4px 6px !important;
    margin: 1px !important;
  }

  #myTabServices .icon {
    width: 20px !important;
    height: 20px !important;
  }

  .tab-carousel-wrapper {
    margin: 15px auto !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

@media screen and (max-width: 450px) and (min-width: 380px) {

  .navbar-info-bar {
    width: auto !important;          
    min-width: 220px !important;     
    max-width: 380px !important;     
    height: auto !important;         
    min-height: 36px !important;     
    font-size: 0.4rem !important;    
    padding: 5px 10px !important;    
    top: 5px !important;             
    overflow: auto !important;      
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;  
    box-sizing: border-box !important; 
    flex-shrink: 0 !important;       
    background: transparent !important; 
    border-radius: 0 !important;      
    box-shadow: none !important;      
  }

  .navbar-info-bar *,
  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info,
  .navbar-info-bar .trm-value {
    font-size: 0.4rem !important;    
    line-height: 1.3 !important;     
    white-space: nowrap !important;  
    margin: 0 !important;            
    padding: 0 !important;           
    display: inline-block !important; 
    max-width: none !important;      
    overflow: auto !important;      
    text-overflow: unset !important; 
    color: #333 !important;          
    font-weight: 500 !important;     
  }

  .navbar-info-bar #current-date,
  .navbar-info-bar #current-time {
    font-size: 0.35rem !important;   
    line-height: 1.3 !important;     
    white-space: nowrap !important;  
    margin: 0 !important;            
    padding: 0 !important;           
    display: inline-block !important; 
    max-width: none !important;      
    overflow: auto !important;      
    text-overflow: unset !important; 
    color: #555 !important;          
  }

  .navbar-info-bar .info-icon {
    font-size: 0.35rem !important;   
    display: inline-block !important; 
    margin: 0 2px !important;        
    color: #007bff !important;       
  }

  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info {
    gap: 4px !important;             
    margin: 2px 0 !important;        
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;          
    overflow: auto !important;      
    flex-wrap: nowrap !important;    
  }

  .navbar-info-bar .info-section {
    gap: 3px !important;             
    margin: 2px 0 !important;        
    padding: 0 !important;           
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;          
    overflow: auto !important;      
    flex-wrap: nowrap !important;    
  }

  .navbar-info-bar .trm-value {
    font-size: 0.4rem !important;    
    font-weight: 600 !important;     
    color: #28a745 !important;       
  }

  .navbar-info-bar .trm-arrow-img {
    width: 12px !important;          
    height: 12px !important;         
    margin-left: 2px !important;     
  }

  .navbar-logo-center-independent {
    top: 80% !important;
  }

  #progress-container {
    top: calc(80% + 15px) !important;
  }
}

@media screen and (max-width: 379px) {

  .navbar-info-bar {
    width: auto !important;          
    min-width: 180px !important;     
    max-width: 320px !important;     
    height: auto !important;         
    min-height: 30px !important;     
    font-size: 0.45rem !important;   
    padding: 3px 6px !important;     
    top: 3px !important;             
    overflow: hidden !important;     
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;  
    box-sizing: border-box !important; 
    flex-shrink: 0 !important;       
    background: transparent !important; 
    border-radius: 0 !important;      
    box-shadow: none !important;      
  }

  .navbar-info-bar *,
  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info,
  .navbar-info-bar .trm-value {
    font-size: 0.45rem !important;   
    line-height: 1.2 !important;     
    white-space: nowrap !important;  
    margin: 0 !important;            
    padding: 0 !important;           
    display: inline-block !important; 
    max-width: 100% !important;      
    overflow: hidden !important;     
    text-overflow: ellipsis !important; 
    color: #333 !important;          
    font-weight: 500 !important;     
  }

  .navbar-info-bar #current-date,
  .navbar-info-bar #current-time {
    font-size: 0.4rem !important;    
    line-height: 1.2 !important;     
    white-space: nowrap !important;  
    margin: 0 !important;            
    padding: 0 !important;           
    display: inline-block !important; 
    max-width: 100% !important;      
    overflow: hidden !important;     
    text-overflow: ellipsis !important; 
    color: #666 !important;          
  }

  .navbar-info-bar .info-icon {
    font-size: 0.4rem !important;    
    display: inline-block !important; 
    margin: 0 1px !important;        
    color: #007bff !important;       
  }

  .navbar-info-bar .datetime-info,
  .navbar-info-bar .trm-info {
    gap: 2px !important;             
    margin: 0 !important;            
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;          
    overflow: hidden !important;     
  }

  .navbar-info-bar .info-section {
    gap: 1px !important;             
    margin: 0 !important;            
    padding: 0 !important;           
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;          
    overflow: hidden !important;     
  }

  .navbar-info-bar .trm-value {
    font-size: 0.5rem !important;    
    font-weight: 600 !important;     
    color: #28a745 !important;       
  }

  .navbar-info-bar .trm-arrow-img {
    width: 10px !important;          
    height: 10px !important;         
    margin-left: 1px !important;     
  }

  .navbar-logo-center-independent {
    top: 85% !important;
  }

  #progress-container {
    top: calc(85% + 10px) !important;
  }
}

#myTabServices,
.tab-carousel-wrapper {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#myTabServices .nav-item {
  display: block !important;
  visibility: visible !important;
}

#myTabServices .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
  .SliderPrincipal {
    margin-left: -2rem !important; 
    margin-top: 20rem !important; 
    width: auto !important;
    max-width: 90% !important; 
  }

  .slider-text {
    max-width: 450px !important;
    margin-left: 0 !important;
    padding: 20px 25px !important;
  }
}

@media screen and (max-width: 768px) {
  .SliderPrincipal {
    margin-left: 0 !important; 
    margin-top: 6rem !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .slider-text {
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 576px) {
  .SliderPrincipal {
    margin-left: 0 !important;
    margin-top: 4rem !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  .slider-text {
    max-width: 95% !important;
    margin: 0 auto !important;
    padding: 15px !important;
    font-size: 14px !important;
  }

  .slider-text .slide-title {
    font-size: 1.8rem !important;
  }

  .slider-text .slide-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
}

html body .navbar,
html body .navbar.fixed-top,
html body nav.navbar {
  z-index: 100000 !important; 
}

html body .tab-carousel-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  clear: both !important;
  margin: 20px auto !important;
  width: 100% !important;
  max-width: 1200px !important;
}

html body ul#myTabServices.nav.nav-tabs {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

html body #myTabServices .nav-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =============================================
   CONTROLES ULTRA GRANULARES PARA LOGOS Y MENÚ
   Sistema de breakpoints cada 50-100px para cobertura completa
   Logo.gif, LogoNombre.png, y Menú Hamburguesa
   ============================================= */

/* =============================================
   DESKTOP - PANTALLAS GRANDES
   ============================================= */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   🖥️ DESKTOP EXTRA GRANDE (>1400px) - CONTROLES LOGO.GIF
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1401px) {
  
  /* 🎯 LOGO.GIF - CONTROLES COMPLETOS Y SEPARADOS */
  
  /* Contenedor del logo - POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand {
    position: absolute !important;
    left: 20px !important;              /* ← 🔧 EJE X: Posición horizontal (20px, 40px, 60px...) */
    top: 50% !important;                /* ← 🔧 EJE Y: Logo.gif Posición vertical (30%, 50%, 70%...) */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Logo.gif - TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img {
    width: 400px !important;            /* ← 🔧 ANCHO: Solo el ancho (300px, 400px, 500px...) */
    height: 100px !important;           /* ← 🔧 ALTO: Solo la altura (80px, 100px, 120px...) */
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo-nombre.png - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: calc(50% + 60px) !important;  /* ← EJE X - Posicion horizontal: 50% + offset */
    top: 30% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 80px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo - VALOR DE PRUEBA */
    max-width: 500px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo-nombre.png - VALOR DE PRUEBA */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   🖥️ DESKTOP GRANDE (1201px - 1400px) - CONTROLES LOGO.GIF
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1400px) and (min-width: 1201px) {
  
  /* 🎯 LOGO.GIF - CONTROLES COMPLETOS Y SEPARADOS */
  
  /* Contenedor del logo - POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand {
    position: absolute !important;
    left: 20px !important;              /* ← 🔧 EJE X: Posición horizontal (20px, 40px, 60px...) */
    top: 50% !important;                /* ← 🔧 EJE Y: Posición vertical (30%, 50%, 70%...) */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Logo.gif - TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img {
    width: 350px !important;            /* ← 🔧 ANCHO: Solo el ancho (250px, 350px, 450px...) */
    height: 90px !important;            /* ← 🔧 ALTO: Solo la altura (70px, 90px, 110px...) */
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: 100px !important;              /* ← 🔧 EJE X: Posición horizontal (20px, 40px, 60px...) */
    top: 50% !important; 
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: calc(50% + 50px) !important;  /* ← EJE X - Posicion horizontal: 50% + offset */
    top: 50% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 26px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 300px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}  /* Corregir hacia arriba los responsivos grandes*/

/* Desktop Mediano Alto (1101px - 1200px) */
@media screen and (max-width: 1200px) and (min-width: 1101px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 20px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 440px !important;
    height: 125px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 105px !important;
    max-width: 420px !important;
    width: 420px !important;
    height: 105px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: 100px !important;              /* ← 🔧 EJE X: Posición horizontal (20px, 40px, 60px...) */
    top: 50% !important; 
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: calc(75% + 45px) !important;  /* ← EJE X - Posicion horizontal: 50% + offset */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 32px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 450px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 475px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Desktop Mediano (993px - 1100px) */
@media screen and (max-width: 1100px) and (min-width: 993px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 20px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 90px !important;
    max-width: 360px !important;
    width: 360px !important;
    height: 90px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: calc(78% + 40px) !important;  /* ← EJE X - Posicion horizontal: 50% + offset */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 30px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 350px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 475px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* =============================================
   TABLETS Y LANDSCAPE PHONES
   ============================================= */

/* Tablet Grande (992px) */
@media screen and (max-width: 992px) and (min-width: 801px) {
  /* Ocultar elementos del menú desktop */
  .navbar-element-independent {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Ocultar todos los nav-link del menú desktop */
  .navbar-element-independent .nav-link,
  .navbar-element-independent .nav-item,
  .navbar-element-independent.dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 15px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 75px !important;
    max-width: 300px !important;
    width: 300px !important;
    height: 75px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 83% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 30px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 320px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 475px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }

  /* OCULTAR el menú responsive por defecto */
  .responsive-menu,
  ul.responsive-menu,
  .navbar-nav.responsive-menu {
    display: none !important;
    flex-direction: column !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* MOSTRAR el menú responsive solo cuando el navbar-collapse tiene la clase 'show' */
  .navbar-collapse.show .responsive-menu,
  .navbar-collapse.show ul.responsive-menu,
  .navbar-collapse.show .navbar-nav.responsive-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* Tablet Mediano (801px - 900px) */
@media screen and (max-width: 900px) and (min-width: 801px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 15px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 75px !important;
    max-width: 300px !important;
    width: 300px !important;
    height: 75px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 80% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 30px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 320px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 350px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Tablet Pequeño (701px - 800px) */
@media screen and (max-width: 800px) and (min-width: 701px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 15px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 68px !important;
    max-width: 270px !important;
    width: 270px !important;
    height: 68px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 78% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 28px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 300px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 320px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* NOTA: El breakpoint para 698px (691px-700px) está en gep-responsive-fix.css
   que se carga DESPUÉS de este archivo y tiene mayor prioridad */

/* Landscape Phone Alto (651px - 700px) */
@media screen and (max-width: 700px) and (min-width: 651px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN - Se añade [style] para sobreescribir estilos en línea del HTML */
  .navbar-logo-independent,
  .navbar-logo-independent[style],
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    display: block !important; /* Asegura que el logo sea visible */
    visibility: visible !important; /* Asegura que el logo sea visible */
    z-index: 5001 !important; /* Asegura que el logo esté por encima de otros elementos como el menú hamburguesa (z-index: 5000) */
    left: 15px !important;    /* EJE X - Posición horizontal - Sobrescribe el JS que pone left: 180px */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .navbar-logo-independent .logo-face,
  .navbar-logo-independent .logo-face video,
  .navbar-logo-independent .logo-face img {
    display: block !important; /* Asegura que sea visible */
    visibility: visible !important; /* Asegura visibilidad */
    max-height: 65px !important; /* Altura máxima del logo */
    max-width: 260px !important; /* Ancho máximo del logo */
    width: auto !important;     /* Ancho automático para mantener proporción */
    height: auto !important;     /* Alto automático */
    top: 5px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: -15px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
    object-fit: contain !important;
    opacity: 1 !important; /* Asegura que no esté transparente */
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 73% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 280px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 350px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo nombre */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 300px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Landscape Phone Mediano (601px - 650px) */
@media screen and (max-width: 650px) and (min-width: 601px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    display: block !important; /* Asegura que el logo sea visible */
    visibility: visible !important; /* Asegura que el logo sea visible */
    z-index: 5001 !important; /* Asegura que el logo esté por encima del menú hamburguesa */
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 58px !important;
    max-width: 235px !important;
    width: 235px !important;
    height: 58px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 70% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 25px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 350px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 150px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 260px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* =============================================
   MÓVILES - PORTRAIT MODE
   ============================================= */

/* Móvil Extra Grande (551px - 600px) */
@media screen and (max-width: 600px) and (min-width: 551px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 240px !important;
    height: 74px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 54px !important;
    max-width: 220px !important;
    width: 220px !important;
    height: 54px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 75% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 24px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 250px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 110px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 240px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Grande Alto (521px - 550px) */
@media screen and (max-width: 550px) and (min-width: 521px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 52px !important;
    max-width: 210px !important;
    width: 210px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 75% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 23px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 250px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 110px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 240px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Grande (481px - 520px) */
@media screen and (max-width: 520px) and (min-width: 481px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 220px !important;
    height: 70px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 50px !important;
    max-width: 200px !important;
    width: 200px !important;
    height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 74% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 22px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 250px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 110px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 210px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Mediano Alto (451px - 480px) */ /*aplica para 468 x 858*/
@media screen and (max-width: 480px) and (min-width: 451px) {
  
  /* REGLAS UNIVERSALES PARA CUALQUIER LOGO - BUSCAR TODOS LOS SELECTORES POSIBLES */
  
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: fixed !important;   
    left: -10px !important;        /* ← MOVER IZQUIERDA/DERECHA: Aumenta para mover a la derecha, disminuye para mover a la izquierda */
    top: 38px !important;         /* ← SUBIR/BAJAR: Aumenta para bajar, disminuye para subir */
    z-index: 9999 !important;    
    display: block !important;   
    visibility: visible !important; 
    opacity: 1 !important;       
    width: 220px !important;         /* ← ANCHO DEL CONTENEDOR: Debe ser igual o mayor que la imagen */
    height: 100px !important;       /* ← ALTO DEL CONTENEDOR: Aumentado para evitar recorte */
    overflow: visible !important;    /* ← EVITAR RECORTE: Permite que la imagen se salga del contenedor si es necesario */
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 80px !important;    /* ← TAMAÑO VERTICAL: Aumentado para que coincida con el contenedor */
    max-width: 200px !important;    /* ← TAMAÑO HORIZONTAL: Cambia este valor para hacer el logo más ancho/estrecho */
    width: 200px !important;        /* ← ANCHO FIJO: Igual que max-width */
    height: 80px !important;        /* ← ALTO FIJO: Aumentado para que coincida con max-height */
    object-fit: contain !important;
    display: block !important;      
    visibility: visible !important; 
    opacity: 1 !important;          
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 70% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 20% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 22px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 250px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 100px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 200px !important;    /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Mediano (421px - 450px) */
@media screen and (max-width: 450px) and (min-width: 421px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 200px !important;
    height: 66px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 46px !important;
    max-width: 180px !important;
    width: 180px !important;
    height: 46px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 65% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 10% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 20px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 300px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 105px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 190px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Mediano Bajo (391px - 420px) */
@media screen and (max-width: 420px) and (min-width: 391px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 44px !important;
    max-width: 170px !important;
    width: 170px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 84% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 19px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 155px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 50px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 8px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Pequeño Alto (361px - 390px) */
@media screen and (max-width: 390px) and (min-width: 361px) {
  /* Logo.gif - izquierda - CONTROLES POSICIÓN */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;       /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
  }

  /* Logo.gif - izquierda - CONTROLES TAMAÑO */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 42px !important;
    max-width: 160px !important;
    width: 160px !important;
    height: 42px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 85% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 19px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 150px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 50px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 8px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Pequeño (341px - 360px) */
@media screen and (max-width: 360px) and (min-width: 341px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 170px !important;
    height: 60px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 40px !important;
    max-width: 150px !important;
    width: 150px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 85% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 18px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 140px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 50px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 8px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Muy Pequeño (321px - 340px) */
@media screen and (max-width: 340px) and (min-width: 321px) {
  /* Logo.gif - izquierda */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img {
    max-height: 38px !important;
    max-width: 140px !important;
    width: 140px !important;
    height: 38px !important;
    object-fit: contain !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 86% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 17px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 130px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 50px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 7px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}

/* Móvil Mini (≤ 320px) */
@media screen and (max-width: 320px) {
  /* Todos los contenedores posibles del logo */
  .navbar-logo-independent,
  .navbar-logo-independent .logo-coin-container,
  .logo-coin-container,
  .navbar-brand,
  .logo-container,
  #logo-container,
  .logo,
  #logo {
    position: absolute !important;
    left: 10px !important;    /* EJE X - Posición horizontal */
    top: 50% !important;      /* EJE Y - Posición vertical */
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 150px !important;
    height: 55px !important;
    overflow: visible !important;
  }

  /* Todas las imágenes posibles del logo */
  #LogoGifMain,
  .navbar-logo-independent img,
  .navbar-logo-independent .logo-coin-container img,
  .logo-coin-container img,
  .navbar-brand img,
  .logo-container img,
  #logo-container img,
  .logo img,
  #logo img,
  img[src*="logo"],
  img[src*="Logo"] {
    max-height: 35px !important;
    max-width: 130px !important;
    width: 130px !important;
    height: 35px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* Logo nombre - centro - CONTROLES POSICION */
  .navbar-logo-center-independent,
  div.navbar-logo-center-independent {
    left: 50% !important;               /* ← EJE X - Posicion horizontal: 50% = centrado */
    top: 86% !important;                /* ← EJE Y - Posicion vertical: Aumenta para bajar, disminuye para subir */
    transform: translate(-50%, -50%) !important;
  }

  /* Logo nombre - centro - CONTROLES TAMAÑO */
  .navbar-logo-center-independent img,
  div.navbar-logo-center-independent img,
  .navbar-static .navbar-logo-center-independent img,
  .navbar-floating .navbar-logo-center-independent img {
    max-height: 16px !important;        /* ← ALTO MAXIMO: Controla el tamaño vertical del logo */
    max-width: 120px !important;        /* ← ANCHO MAXIMO: Controla el tamaño horizontal del logo */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú hamburguesa - CONTROLES POSICION */
  .navbar-toggler {
    top: 50px !important;      /* ← SUBIR/BAJAR: Usa PIXELES para posición fija (no porcentajes que cambian con scroll) */
    right: 5px !important;     /* ← IZQUIERDA/DERECHA: Distancia desde el borde derecho */
  }
}