/* MENU STICKY

.lagom-layout-top .app-nav {
    position: sticky;
    top:0 !important;
    z-index:2000;
}
 */

ul.top-nav {
  padding-left: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  list-style: none;
  white-space: nowrap;
  display: flex;
  width:100%;
}
ul.top-nav > a:not(.btn), ul.top-nav > li {
  position: relative;
  display: flex;
  align-items: center;
}
.top-nav .promo-top {
  margin-right: auto;
}

/* Ajustamos la barra de navegacion cuando en el area de cliente */

 .page-user-logged .top-nav{width: auto;}
 .page-lagom-cms .top-nav{width: 100%;}

/* Fondos para los Bloques del sitio web */

.bg1 {background:#fff !important;}

.bg2 {background:#fbfbfb !important;}

.bg3 {background:#f2f2f2 !important;}


/* Ajustes para Dark Mode los Bloques del home page */


.lagom-dark-mode .bg1 {
    background: #1a1a1a !important; /* Color para modo oscuro */
    
}

.lagom-dark-mode .bg2 {background: #1a1a1a !important; /* Color para modo oscuro */
    
}

.lagom-dark-mode .bg3 {
    background: #1a1a1a !important; /* Color para modo oscuro */
}


/* Solo redefinimos la variable en dark mode */
.lagom-dark-mode {
    --panel-sidebar-link-active-color: #ccc;
    --panel-sidebar-link-active-icon-color:#ccc;
    --text-faded-color:#ccc;
    --text-lighter-color:#ccc;
    --app-nav-top-menu-icon-color:#ccc;
    --ui-nav-link-active-bg:#555050;
    --input-label-color: #ccc;
    --app-nav-left-link-active-color:#e2e3e5;
    --app-nav-left-link-hover-color: #c8ced8;
    
    /* Modal PROMO on TOP */
    
    --alert-success-bg:#494974;
    --alert-success-border:#ad0813;
    --brand-success-lighter-2:#fff;
    
}


.alert-content {width:80% !important;}
.lagom-dark-mode .alert-content {width:80% !important;}

/* Removemos la segunda imagen del bloque packages */

.page-lagom-cms .package-content img {display: none;}

/* Agreagamos decoracion a las descripcciones */

.package-specs li {
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.package-specs li i {
    font-size: 16px;
    color: #007bff; /* Cambia el color según tu diseño */
}

/* Efect on Promo Banner SVG icon Rotation */

@keyframes spinAlternate {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

#clientAlert3 .svg-icon {
  animation: spinAlternate 2s linear infinite !important;
  transform-origin: center !important;
}



/*
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.svg-icon {
  animation: shake 0.6s ease-in-out infinite !important;
  transform-origin: center !important;
  display: inline-block !important;
  will-change: transform !important;
}
*/
@keyframes shakeFA {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
}

.fas.fa-phone-alt::before {
  animation: shakeFA 0.9s ease-in-out infinite !important;
  display: inline-block !important;
  transform-origin: center center !important;
  will-change: transform !important;
}