/* =========================
   1. BASE PARA ESTILOS
========================= */


body, html{
    overflow-x: clip;
}

.empresarial-color {
     color: #ff6140 !important;
 }

.icon-header{display:inline-block;width:20px;height:20px;background:url("https://cdn-pro.elsalvador.com/escom_epsilon/images/icons.svg");background-repeat:no-repeat;} /*poner el link de la cdn para los iconos*/

 .icon-header.newsletter {
    background-position: -95px -373px;
    filter: invert(1);
}
.icon-header.search {
    background-position: -59px -373px;
}
.icon-header.map {
    background-position: -24px -372px;
}
.icon-header.globe {
    background-position: -134px -372px;
}

 /* =========================
   2. HEADER LAYOUT
========================= */
 #portal-escom-header {
     position: sticky;
     top: 0;
     z-index: 1050;
     background: white;
     overflow: visible;
 }

 /* =========================
   3. TOPBAR + LOGO
========================= */
 .portal-escom-topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 15px;
 }

 .portal-escom-logo {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .portal-escom-logo img {
     height: 45px;
     transition: all 0.3s ease;
 }

 .portal-escom-logo-compact {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.1);
     opacity: 0;
 }

 /* =========================
   4. BOTONES
========================= */
 .btn-newsletter {
     background: #7b5cff;
     color: white;
     padding: 5px 10px;
     font-size: 13px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 5px;
     border: 2px solid #7b5cff;
     transition: .4s;
     
 }

.icon-btn {
     background: white;
     padding: 4px 4px;
     border-radius: 5px;
     font-size: 13px;
     display: flex;
     align-items: center;
     gap: 4px;
     transition: .4s;
     border: 2px solid;
 }
 .icon-btn:hover {
     color: #7b5cff;
     border: 2px solid #7b5cff;
 }

 /* =========================
   5. PUBLICIDAD
========================= */
 .portal-escom-ad-banner {
     overflow: hidden;
     transition: opacity 0.25s ease, transform 0.3s ease, max-height 0.35s ease 0.2s;
     max-height: 120px;
 }

 /* =========================
   6. NAVEGACIÓN
========================= */
 .portal-escom-nav {
     display: flex;
     justify-content: center;
     gap: 40px;
     padding: 12px 5px 15px;
     background: white;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
 }

 .portal-escom-nav a {
     color: #111;
     font-size: 15px;
     text-decoration: none;
     font-weight: 700;
     position: relative;
     padding-bottom: 6px;
 }

 .portal-escom-nav a.active::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     width: 100%;
     height: 3px;
     background: #7b5cff;
     border-radius: 2px;
 }

 /* =========================
   7. DROPDOWN NAV
========================= */
 .portal-escom-nav-item-dropdown {
     position: relative;
 }

 .portal-escom-dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background: white;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 10px 0;
     min-width: 180px;
     display: none;
     flex-direction: column;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     z-index: 2000;
 }

 .portal-escom-dropdown-menu a {
     padding: 8px 15px;
     font-size: 14px;
     color: #333;
 }

 .portal-escom-dropdown-menu a:hover {
     background: #f5f5f5;
 }

 /* =========================
   8. TAGS
========================= */
 .portal-escom-tags {
     display: flex;
     justify-content: center;
     gap: 20px;
     padding: 8px 15px;
     background: #f3f3f3;
     font-size: 13px;
     overflow-x: visible;
     transition: transform 0.3s ease, opacity 0.25s ease;
     will-change: transform, opacity;
 }

 .portal-escom-tag a {
     position: relative;
     padding-left: 14px;
     color: #555;
     text-decoration: none;
 }

 .portal-escom-tag a::before {
     content: "";
     position: absolute;
     left: 0;
     top: 3px;
     border-left: 6px solid #7b5cff;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
 }

 /* =========================
   9. SEARCH
========================= */
.portal-escom-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.portal-escom-search-overlay .search-box {
    position: absolute;
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    /* sólido */
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    top: 0;
}

.portal-escom-search-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#closeSearch {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    border-radius: 50px;
}

.gcsc-branding {
    display: none !important;
}

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus {
    border: 0px solid #bbb !important;
}

.gsc-control-cse {
    border-color: #d1d1d1 !important;
    background-color: #FFFFFF;
    border-radius: 10px;
}
 /* =========================
   10. LANGUAGE
========================= */
 .portal-escom-lang-dropdown {
     position: relative;
 }

 .portal-escom-lang-menu {
     position: absolute;
     top: 100%;
     right: 0;
     background: white;
     border: 1px solid #eee;
     border-radius: 8px;
     padding: 8px 0;
     min-width: 160px;
     display: none;
     flex-direction: column;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     z-index: 100;
 }

 .portal-escom-lang-menu a {
     padding: 8px 15px;
     font-size: 14px;
     color: #333;
     text-decoration: none;
 }

 .portal-escom-lang-menu a:hover {
     background: #f5f5f5;
 }

 /* =========================
   11. ESTADOS
========================= */

 /* SCROLL */
 .portal-escom-scrolled .logo-full {
     opacity: 0;
     transform: scale(0.9);
 }

 .portal-escom-scrolled .portal-escom-logo-compact {
     opacity: 1;
     transform: translate(-50%, -50%) scale(0.5);
 }

 .portal-escom-scrolled .portal-escom-tags {
     transform: translateY(-100%);
     opacity: 0;
     pointer-events: none;
 }

 .portal-escom-scrolled .portal-escom-ad-banner {
     opacity: 0;
     transform: translateY(-20px);
     max-height: 0;
 }

 /* INTERACCIONES */
 .portal-escom-nav-item-dropdown:hover .portal-escom-dropdown-menu {
     display: flex;
 }

 .portal-escom-lang-dropdown:hover .portal-escom-lang-menu {
     display: flex;
 }

 .portal-escom-lang-dropdown.force-hide .portal-escom-lang-menu {
     display: none !important;
 }




 /* =========================
   TABLET / IPAD (768px - 991px)
========================= */
 @media (min-width: 768px) and (max-width: 991px) {

     /* LOGO */
     .portal-escom-logo img {
         height: 40px;
     }

     /* TOPBAR */
     .portal-escom-topbar {
         padding: 8px 12px;
     }

     /* NAV */
     .portal-escom-nav {
         gap: 25px;
         padding: 10px 10px 12px;
         justify-content: flex-start;
         overflow-x: auto;
         white-space: nowrap;
         scrollbar-width: none;
     }

     .portal-escom-nav::-webkit-scrollbar {
         display: none;
     }

     .portal-escom-nav a {
         font-size: 14px;
         flex: 0 0 auto;
     }

     /* TAGS */
     .portal-escom-tags {
         justify-content: flex-start;
         gap: 15px;
         overflow-x: auto;
         white-space: nowrap;
         scrollbar-width: none;
     }

     .portal-escom-tags::-webkit-scrollbar {
         display: none;
     }

     .portal-escom-tag a {
         font-size: 12px;
         flex: 0 0 auto;
     }

     /* BOTONES */
     .btn-newsletter {
         font-size: 12px;
         padding: 4px 8px;
     }

     .icon-btn {
         font-size: 12px;
         padding: 4px 6px;
     }

     /* SEARCH */
     .portal-escom-search-container.active #searchInput {
         width: 140px;
     }

     /* DROPDOWN (mejor UX en tablet) */
     .portal-escom-dropdown-menu {
         min-width: 160px;
     }

 }

 /* =========================
   12. RESPONSIVE
========================= */
 @media (max-width: 767px) {

     .portal-escom-logo img {
         height: 35px;
     }

     .portal-escom-nav {
         justify-content: flex-start;
         gap: 30px;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
         display: flex;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
         position: relative;
     }

     .portal-escom-nav::-webkit-scrollbar {
         display: none;
     }

     .portal-escom-nav a {
         flex: 0 0 auto;
         display: inline-block;
         position: relative;
         padding-bottom: 10px;
     }

     .portal-escom-nav a.active::after {
         bottom: 3px;
         z-index: 2;
     }

     .portal-escom-nav::before,
     .portal-escom-nav::after {
         content: "";
         flex: 0 0 15px;
     }

     .portal-escom-tags {
         justify-content: flex-start;
         gap: 15px;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .portal-escom-tags::-webkit-scrollbar {
         display: none;
     }

     .portal-escom-tag a {
         flex: 0 0 auto;
     }

     .portal-escom-dropdown-menu {
         display: none !important;
     }

     .portal-escom-search-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 70px;
         background: white;
         z-index: 2000;
         display: flex;
         align-items: center;
         transform: translateY(-100%);
         transition: transform 0.3s ease;
     }

     .portal-escom-search-overlay.active {
         transform: translateY(0);
     }

     .search-box input {
         width: 100%;
         padding: 10px;
         font-size: 16px;
     }

     #closeSearch {
         position: absolute;
         top: 17px;
         right: 20px;
     }

     .portal-escom-lang-dropdown:hover .portal-escom-lang-menu {
         display: none;
     }

     .portal-escom-lang-dropdown.active .portal-escom-lang-menu {
         display: flex;
     }
 }