/* ============================================================
   TOPBAR — Estilos completos
   pinturaelectrostaticacolombia.com
   ============================================================ */

/* ══════════════════════════════════════════════
   NEUTRALIZAR WRAPPERS DE JOOMLA / BOOTSTRAP
   Joomla envuelve el módulo en: section#sp-topbar >
   .container > .container-inner > .row > .col-lg-12 >
   .sp-column > .sp-module > .sp-module-content > .mod-custom
   Todo eso tiene padding/margin/max-width de Bootstrap
   que hay que cancelar para que el topbar sea full-width
═══════════════════════════════════════════════ */
section#sp-topbar {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
}
@media (min-width: 1024px) {
  section#sp-topbar {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    z-index: 942;
    position: relative;
    overflow: visible !important;
  }
}
section#sp-topbar > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
section#sp-topbar .container-inner {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
section#sp-topbar .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
section#sp-topbar [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 100%;
  max-width: 100%;
}
section#sp-topbar .sp-column,
section#sp-topbar .sp-module,
section#sp-topbar .sp-module-content,
section#sp-topbar .mod-custom {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ══════════════════════════════════════════════
   TOPBAR — Contenedor principal
═══════════════════════════════════════════════ */
.topbar {
  background: var(--sppb-maincolor-dark) !important;
  border-bottom: none !important;
  padding: 0;
  height: 43px;
  min-height: 43px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 100;
  width: 100%;
}

/* Override Bootstrap en el .container interno del topbar */
.topbar > .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 15px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 768px – 849px */
@media (min-width: 768px) and (max-width: 849px) {
  .topbar__left .topbar-info:nth-child(3)                   { display: none !important; } /* Horario */
  .topbar-dropdown-wrap:nth-child(1)                         { display: none !important; } /* La Empresa */
  .topbar-dropdown-wrap:nth-child(2)                         { display: flex !important; } /* Nuestros Servicios */
  .topbar-dropdown-wrap:nth-child(2) span.topbar-link--dd    { display: flex !important; }
}

/* 1024px – 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .tb-horario { display: none !important; }
  .topbar-link--cta { display: none !important; }
}

/* 1200px – 1365px: ancho fijo 1180px centrado */
@media (min-width: 1200px) and (max-width: 1365px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px 0px 0px 15px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .tb-horario { display: none !important; }
  .tb-item-buscar { display: flex !important; }
}


/* 1024px-1365px: mismo tamaño de topbar que PC grande */
@media (min-width: 1024px) and (max-width: 1365px) {
  .topbar,
  .topbar-info,
  .topbar-link,
  span.topbar-link--dd {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
  }
  .topbar-dropdown li a {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0px !important;
  }
}
/* 1366px – 1599px: ancho fijo 1490px centrado */
@media (min-width: 1366px) and (max-width: 1599px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px 0px 0px 15px !important;
  }
}

/* 1600px – 1919px: ancho fijo 1640px centrado */
@media (min-width: 1600px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px 0px 0px 0px !important;
  }
}

/* Empresa: xshort oculto por defecto, visible solo hasta 397px */
.tb-txt-xshort { display: none !important; }
.tb-item-buscar { display: none !important; }
.topbar .tb-productos-wrap,
.topbar .tb-item-productos { display: flex !important; }

/* " / 24-7" junto al teléfono: oculto hasta 575px */
.tb-247 { display: inline; }
@media (max-width: 575px) {
  .tb-247 { display: none !important; }
  .tb-phone-country { display: none !important; }
}

/* Teléfonos: principal visible por defecto, alternativo solo hasta 509px */
.tb-phone-alt  { display: none !important; }
@media (max-width: 509px) {
  .tb-phone-main { display: none !important; }
  .tb-phone-alt  { display: flex !important; }
}
@media (max-width: 377px) {
  .tb-phone-alt  { display: none !important; }
}

/* Ciudad: texto largo por defecto, corto solo hasta 500px */
.tb-city-short { display: none !important; }
.tb-city-long  { display: inline !important; }
.tb-city-xshort { display: none !important; }
.tb-city-xxshort { display: none !important; }

@media (min-width: 576px) and (max-width: 619px) {
  .tb-city-long  { display: none !important; }
  .tb-city-short { display: inline !important; }
  .tb-city-xshort { display: none !important; }
  .tb-city-xxshort { display: none !important; }
  .tb-phone-country { display: none !important; }
  .topbar .tb-empresa-wrap,
  .topbar .tb-item-empresa { display: flex !important; }
}

/* Texto responsive en topbar: largo por defecto, corto en 1366–1919px */
.tb-txt-short { display: none !important; }
.tb-txt-long  { display: inline !important; }

@media (min-width: 850px) and (max-width: 1919px) {
  .tb-txt-short { display: inline !important; }
  .tb-txt-long  { display: none !important; }
}
@media (min-width: 1920px) {
  .tb-txt-short { display: none !important; }
  .tb-txt-long  { display: inline !important; }
}

/* 1366px–1599px: textos específicos por elemento
   Este bloque va DESPUÉS de los bloques 850–1919px y 850–1599px para ganar en cascada */
@media (min-width: 1366px) and (max-width: 1599px) {
  /* "Nuestra Empresa" (1er dropdown) → mostrar texto largo */
  .topbar__right > .topbar-dropdown-wrap:nth-child(1) .tb-txt-short { display: none !important; }
  .topbar__right > .topbar-dropdown-wrap:nth-child(1) .tb-txt-long  { display: inline !important; }
  /* "Nuestra Empresa" (1er dropdown) → solo los 2 primeros items visibles */
  .topbar__right > .topbar-dropdown-wrap:nth-child(1) .topbar-dropdown li:nth-child(n+3) { display: none !important; }
  /* "Nuestros Servicios" (2do dropdown) → mantener texto corto "Servicios" (default) */
}

/* 1200px–1365px: "Nuestra Empresa" → solo los 2 primeros items visibles */
@media (min-width: 1200px) and (max-width: 1365px) {
  .topbar__right > .topbar-dropdown-wrap:nth-child(1) .topbar-dropdown li:nth-child(n+3) { display: none !important; }
}

/* 1920px en adelante: ancho fijo 1800px centrado */
@media (min-width: 1920px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.topbar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 43px;
  min-height: 43px;
}

/* ──────────────────────────────────────────────
   LEFT — Información de contacto
────────────────────────────────────────────── */
.topbar__left {
  display: flex;
  align-items: center;
  gap: 0;
}

.topbar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 18px !important;
  height: 100%;
  color: #fff;
  border-right: 1px solid #D59B02;
  white-space: nowrap;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  transition: all var(--dur-fast);
  text-decoration: none;
}
.topbar-info:first-child {
  padding-left: 0;
}
.topbar-info:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.topbar-info i {
  font-size: 0.9rem;
  color: #EDC587;
  font-weight: 400;
  flex-shrink: 0;
}
.topbar-info strong {
  color: #fff;
  font-weight: 400;
}

/* ──────────────────────────────────────────────
   RIGHT — Links rápidos
────────────────────────────────────────────── */
.topbar__right {
  display: flex;
  align-items: stretch;
}

.topbar-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 100%;
  color: #fff;
  border-left: 1px solid #D59B02;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: all var(--dur-fast);
  text-decoration: none;
}
.topbar-link i {
  font-size: 0.9rem;
  color: #EDC587;
  font-weight: 400;
}
.topbar-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.topbar-link:hover i {
  color: #EDC587;
  font-weight: 400;
}

/* CTA especial (Contáctenos) */
.topbar-link--cta {
  background: none !important;
  color: #fff !important;
  font-weight: 400;
  padding: 0 22px;
  border-left: none;
  letter-spacing: 0.04em;
}
.topbar-link--cta::before {
  width: 1px !important;
}
.topbar-link--cta i {
  color: var(--sppb-secondcolor) !important;
  font-weight: bold;
}
.topbar-link--cta:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
.topbar-link--cta:hover i {
  color: var(--sppb-secondcolor) !important;
  font-weight: bold;
}

/* ══════════════════════════════════════════════
   DROPDOWN DEL TOPBAR
═══════════════════════════════════════════════ */
.topbar-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tb-empresa-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tb-productos-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tb-servicios-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tb-productos-wrap.is-open .tb-productos-menu {
  display: block;
}
.tb-servicios-wrap.is-open .tb-servicios-menu {
  display: block;
}
.tb-empresa-wrap.is-open .tb-empresa-menu {
  display: block;
}
.tb-productos-menu {
  height: auto !important;
  max-height: calc(100dvh - var(--tb-productos-top, 70px) - 10px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 99999 !important;
}
.tb-servicios-menu {
  height: auto !important;
  max-height: calc(100dvh - var(--tb-servicios-top, 70px) - 10px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 99999 !important;
}
.tb-productos-wrap.is-open .tb-productos-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100dvh - var(--tb-productos-top, 70px)) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.tb-productos-wrap.is-open .tb-productos-menu.tb-productos-menu--fit-screen {
  bottom: 0 !important;
}
@media (max-width: 992px) {
  .tb-empresa-wrap.is-open .tb-empresa-menu {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100dvh - var(--tb-empresa-top, 43px) - 10px) !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }
}
.tb-servicios-wrap.is-open .tb-servicios-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100dvh - var(--tb-servicios-top, 70px)) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.tb-servicios-wrap.is-open .tb-servicios-menu.tb-servicios-menu--fit-screen {
  bottom: 0 !important;
}
.tb-productos-menu li a,
.tb-productos-menu li a:hover,
.tb-servicios-menu li a,
.tb-servicios-menu li a:hover,
.tb-empresa-menu li a,
.tb-empresa-menu li a:hover {
  color: #fff !important;
}
.tb-productos-menu li a::before {
  display: none !important;
}
.tb-servicios-menu li a::before {
  display: inline-block !important;
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
  max-width: 5px;
  max-height: 5px;
  aspect-ratio: 1 / 1;
  background: #E89610;
  border-radius: 50%;
  flex: 0 0 5px;
}
.tb-productos-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-block;
  background-color: #fff;
  -webkit-mask: var(--tb-icon) center center / contain no-repeat;
  mask: var(--tb-icon) center center / contain no-repeat;
  transition: background-color 0.2s ease;
}
.tb-productos-menu li a:hover .tb-productos-icon {
  background-color: #fff;
}

/* Trigger hover — misma apariencia que topbar-link */
span.topbar-link--dd {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 100%;
  color: #fff;
  border-left: 1px solid #D59B02;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: all var(--dur-fast);
  text-decoration: none;
  cursor: default;
}
.topbar-dropdown-wrap.is-open span.topbar-link--dd {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.topbar-dd-arrow {
  font-size: 0.9rem;
  transition: transform 0.25s;
  margin-left: 2px;
}
.topbar-dropdown-wrap.is-open .topbar-dd-arrow {
  transform: rotate(180deg);
}

/* Subitems de servicios en dropdown La Empresa: visibles hasta 1919px */
.tb-dd-servicios { display: list-item; }
@media (min-width: 1920px) {
  .tb-dd-servicios { display: none !important; }
}


/* Lista desplegable */
.topbar-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: #1a1a1a;
  border-top: 3px solid #D28900;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 340px;
  max-width: 340px;
  z-index: 9999;
}
.topbar-dropdown-wrap.is-open .topbar-dropdown {
  display: block;
}
.topbar-dropdown li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  white-space: normal;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, color 0.2s;
  line-height: 1.28rem;
}
.topbar-dropdown li:last-child a {
  border-bottom: none;
}
/* Círculo naranja como bullet */
.topbar-dropdown li a::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.topbar-dropdown li a:hover {
  background: rgba(240,78,35,0.15);
  color: #fff;
}
.topbar-dropdown li a:hover::before {
  transform: scale(1.25);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .topbar__left .topbar-info:nth-child(n+3) { display: none; }
  .topbar__right .topbar-link:nth-child(-n+2) { display: none; }
}
@media (min-width: 850px) and (max-width: 1023px) {
  .topbar-dropdown-wrap              { display: flex !important; }
  span.topbar-link--dd               { display: flex !important; }
  .topbar-link--cta                  { display: none !important; }
}
@media (max-width: 1023px) {
  .topbar {
    background: var(--sppb-maincolor-dark) !important;
    border-bottom: none !important;
    padding: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 951;
    width: 100%;
  }
}

/* hasta 575px */
@media (max-width: 575px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .topbar-info {
    padding: 0 15px !important;
    padding-left: 15px !important;
  }
  .topbar-link--cta {
    padding: 0 15px !important;
  }
  .tb-city-long  { display: none !important; }
  .tb-city-short { display: inline !important; }
  .tb-city-xshort { display: none !important; }
  .tb-txt-short  { display: inline !important; }
  .tb-txt-long   { display: none !important; }
}

@media (max-width: 500px) {
  .tb-city-long  { display: none !important; }
  .tb-city-short { display: none !important; }
  .tb-city-xshort { display: inline !important; }
  .tb-city-xxshort { display: none !important; }
  .tb-phone-alt .tb-phone-country { display: none !important; }
  .topbar .tb-item-empresa { display: none !important; }
}

@media (max-width: 429px) {
  .tb-city-long  { display: none !important; }
  .tb-city-short { display: none !important; }
  .tb-city-xshort { display: none !important; }
  .tb-city-xxshort { display: inline !important; }
}

/* 501px – 609px */
@media (min-width: 501px) and (max-width: 609px) {
  .topbar__left .topbar-info:nth-child(1)  { display: flex !important; } /* Ciudad */
  .topbar__left .topbar-info:nth-child(2)  { display: flex !important; } /* Teléfono */
  .topbar__left .topbar-info:nth-child(3)  { display: none !important; } /* Horario */
  .topbar-dropdown-wrap                    { display: none !important; } /* Ocultar todos los dropdowns */
  .topbar-link--cta                        { display: flex !important; } /* Contacto */
  .tb-txt-short                            { display: inline !important; }
  .tb-txt-long                             { display: none !important; }
}

/* 610px – 659px */
@media (min-width: 610px) and (max-width: 659px) {
  .topbar__left .topbar-info:nth-child(1)  { display: flex !important; } /* Ciudad */
  .topbar__left .topbar-info:nth-child(2)  { display: flex !important; } /* Teléfono */
  .topbar__left .topbar-info:nth-child(3)  { display: none !important; } /* Horario */
  .topbar-dropdown-wrap                    { display: none !important; } /* Ocultar todos los dropdowns */
  .topbar-link--cta                        { display: flex !important; } /* Contáctenos */
  .tb-txt-short                            { display: none !important; }
  .tb-txt-long                             { display: inline !important; }
}

/* 660px – 767px */
@media (min-width: 660px) and (max-width: 767px) {
  .topbar__left .topbar-info:nth-child(1)                        { display: flex !important; } /* Ciudad */
  .topbar__left .topbar-info:nth-child(2)                        { display: flex !important; } /* Teléfono */
  .topbar__left .topbar-info:nth-child(3)                        { display: none !important; } /* Horario */
  .topbar-dropdown-wrap:nth-child(1)                             { display: flex !important; } /* La Empresa */
  .topbar-dropdown-wrap:nth-child(1) span.topbar-link--dd        { display: flex !important; }
  .topbar-dropdown-wrap:nth-child(2)                             { display: none !important; } /* Servicios */
  .topbar-link--cta                                              { display: flex !important; } /* Contacto */
  .tb-txt-short                                                  { display: inline !important; }
  .tb-txt-long                                                   { display: none !important; }
}

/* 850px – 1199px */
@media (min-width: 850px) and (max-width: 1199px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px 0px 0px 15px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* 576px – 849px */
@media (min-width: 576px) and (max-width: 849px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 0 0px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* 501px – 575px */
@media (min-width: 501px) and (max-width: 575px) {
  .topbar > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 0 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* hasta 575px */
@media (max-width: 575px) {
  .topbar-link--cta                                              { display: none !important; }  /* Ocultar Contacto */
  .topbar-dropdown-wrap:nth-child(1)                             { display: flex !important; }  /* La Empresa */
  .topbar-dropdown-wrap:nth-child(1) span.topbar-link--dd        { display: flex !important; }
  .tb-item-productos                                             { display: flex !important; }
  .topbar-dropdown-wrap:nth-child(2)                             { display: none !important; }  /* Servicios */
  .tb-txt-short                                                  { display: inline !important; }
  .tb-txt-long                                                   { display: none !important; }
  span.topbar-link--dd {
    padding: 0 15px 0 15px !important;
    gap: 7px !important;
    align-items: center !important;
    height: 100% !important;
    color: #fff !important;
    border-left: 1px solid #D59B02 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    transition: all var(--dur-fast) !important;
    text-decoration: none !important;
    cursor: default !important;
  }
}

/* 1366px–1599px: tipografía Roboto 0.9rem 0.5px */
@media (min-width: 1366px) and (max-width: 1599px) {
  .topbar,
  .topbar-info,
  .topbar-link,
  span.topbar-link--dd {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0px !important;
  }
  .topbar-dropdown li a {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0px !important;
  }
}

/* min 1600px: tipografía Roboto 1rem 0.5px */
@media (min-width: 1600px) {
  .topbar,
  .topbar-info,
  .topbar-link,
  span.topbar-link--dd {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
  }
  .topbar-dropdown li a {
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0px !important;
  }
}

/* hasta 397px: "La Empresa" → "Nosotros" */
@media (max-width: 397px) {
  .tb-txt-short  { display: none !important; }
  .tb-txt-xshort { display: inline !important; }
}

/* ══════════════════════════════════════════════
   FIXED — topbar
   ≤500px y ≥1600px: pegado arriba al hacer scroll
═══════════════════════════════════════════════ */
@media (max-width: 500px) {
  section#sp-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 950 !important;
  }
}
@media (min-width: 501px) and (max-width: 1599px) {
  section#sp-topbar {
    position: relative !important;
  }
}
@media (min-width: 1600px) {
  section#sp-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 950 !important;
  }
}

/* ══════════════════════════════════════════════
   DIVISORES INDIVIDUALES — ::after / ::before
═══════════════════════════════════════════════ */

/* position: relative necesario para el pseudo-elemento */
.topbar-info.tb-item-ciudad,
.topbar-info.tb-item-tel1,
.topbar-info.tb-item-tel-alt,
.topbar-info.tb-item-horario {
  position: relative;
  border-right: none;
}

.topbar-link.tb-item-buscar,
.topbar-link.tb-item-empresa,
.topbar-link.tb-item-productos,
.topbar-link.tb-item-servicios,
.topbar-link.topbar-link--cta {
  position: relative;
  border-left: none;
}

.topbar-link.tb-item-empresa .fa-chevron-down,
.topbar-link.tb-item-productos .fa-chevron-down,
.topbar-link.tb-item-servicios .fa-chevron-down,
.topbar-link.tb-item-servicios .fa-chevron-up,
.topbar-link.tb-item-productos .fa-chevron-up {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

.tb-productos-chevrons-abierto,
.tb-servicios-chevrons-abierto {
  display: none !important;
  align-items: center;
  flex-direction: column;
  gap: 0px;
  margin-top: 3px;
}

.tb-productos-wrap.is-open.tb-productos-chevrons-visibles .tb-productos-chevron-cerrado,
.tb-servicios-wrap.is-open.tb-servicios-chevrons-visibles .tb-servicios-chevron-cerrado {
  display: none !important;
}

.tb-productos-wrap.is-open.tb-productos-chevrons-visibles .tb-productos-chevrons-abierto,
.tb-servicios-wrap.is-open.tb-servicios-chevrons-visibles .tb-servicios-chevrons-abierto {
  display: inline-flex !important;
}

.tb-productos-text-short {
  display: none !important;
}

.tb-productos-text-xl {
  display: none !important;
}

@media (min-width: 1920px) {
  .tb-productos-text-xl {
    display: inline !important;
  }
  .tb-productos-text-long,
  .tb-productos-text-short {
    display: none !important;
  }
}

@media (max-width: 409px) {
  .tb-productos-text-long {
    display: none !important;
  }
  .tb-productos-text-short {
    display: inline !important;
  }
}

/* ── Divisor DERECHO — bloque izquierdo ── */
.topbar-info.tb-item-ciudad::after,
.topbar-info.tb-item-tel1::after,
.topbar-info.tb-item-tel-alt::after,
.topbar-info.tb-item-horario::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background-color: #D59B02;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Divisor IZQUIERDO — bloque derecho ── */
.topbar-link.tb-item-buscar::before,
.topbar-link.tb-item-empresa::before,
.topbar-link.tb-item-productos::before,
.topbar-link.tb-item-servicios::before,
.topbar-link.topbar-link--cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background-color: #D59B02;
  opacity: 0.5;
  pointer-events: none;
}

/* Override del border-left !important en @media(max-width:575px) */
@media (max-width: 575px) {
  .topbar-link.tb-item-empresa {
    border-left: none !important;
  }
  .topbar-link.tb-item-productos {
    border-left: none !important;
  }
}





/* Topbar hover text and icons */
.topbar a:hover,
.topbar a:hover i,
.topbar .topbar-link:hover,
.topbar .topbar-link:hover i,
.topbar span.topbar-link--dd:hover,
.topbar span.topbar-link--dd:hover i,
.topbar-dropdown-wrap.is-open span.topbar-link--dd,
.topbar-dropdown-wrap.is-open span.topbar-link--dd i,
.topbar-dropdown li a:hover {
  color: #fff !important;
}
.topbar-dropdown li a:hover i {
  color: #EDC587 !important;
  font-weight: 400 !important;
}

.topbar i,
.topbar .fa,
.topbar .fas,
.topbar .far,
.topbar .fab,
.topbar .fa-solid,
.topbar .fa-regular,
.topbar .fa-brands {
  color: #EDC587 !important;
  font-weight: 400 !important;
}

.topbar .topbar-link--cta i,
.topbar .topbar-link--cta:hover i {
  color: var(--sppb-secondcolor) !important;
  font-weight: bold !important;
}
/* 1200px - 1365px: mostrar boton Buscar en topbar */
@media (min-width: 1200px) and (max-width: 1365px) {
  .topbar .tb-item-buscar {
    display: flex !important;
  }
}
/* Hasta 1023px: conservar línea gráfica del topbar */
@media (max-width: 1023px) {
  .topbar {
    background: var(--sppb-maincolor-dark) !important;
    border-bottom: none !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }
  .topbar__inner {
    height: 43px !important;
    min-height: 43px !important;
    align-items: stretch !important;
  }
  .topbar-info,
  .topbar-link,
  span.topbar-link--dd {
    height: 100% !important;
    color: #fff !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
    align-items: center !important;
  }
  .topbar-info i,
  .topbar-link i,
  span.topbar-link--dd i {
    color: #EDC587 !important;
    font-weight: 400 !important;
  }
  .topbar-link.tb-item-empresa::before,
  .topbar-link.tb-item-productos::before,
  .topbar-link.tb-item-servicios::before,
  .topbar-link.tb-item-buscar::before {
    background-color: #D59B02 !important;
    top: 50% !important;
    bottom: auto !important;
    height: 50% !important;
    opacity: 0.5 !important;
    transform: translateY(-50%) !important;
  }
  .topbar a:hover,
  .topbar a:hover i,
  .topbar .topbar-link:hover,
  .topbar .topbar-link:hover i,
  .topbar span.topbar-link--dd:hover,
  .topbar span.topbar-link--dd:hover i {
    color: #EDC587 !important;
    font-weight: 400 !important;
  }
}
/* 0px - 1199px: topbar debajo del menu movil abierto */
@media (max-width: 1199px) {
  body.mobile-menu-open section#sp-topbar,
  body.mobile-menu-open .topbar {
    z-index: 0 !important;
  }
}
/* 0px - 849px: ocultar boton Contacto del topbar */
@media (max-width: 849px) {
  .topbar-link.topbar-link--cta {
    display: none !important;
  }
}
/* Hasta 1023px: igualar tamaño visual del topbar con el header escalado desde 1024px */
@media (max-width: 1023px) {
  .topbar {
    height: 43px !important;
    min-height: 43px !important;
    border-bottom: none !important;
  }
  .topbar__inner {
    height: 43px !important;
    min-height: 43px !important;
  }
  .topbar-info,
  .topbar-link,
  span.topbar-link--dd {
    font-size: 0.9rem !important;
  }
}
/* Hasta 1023px: separadores del topbar completos de arriba abajo */
@media (max-width: 1023px) {
  .topbar-link.tb-item-buscar::before,
  .topbar-link.tb-item-empresa::before,
  .topbar-link.tb-item-productos::before,
  .topbar-link.tb-item-servicios::before,
  .topbar-info.tb-item-ciudad::after,
  .topbar-info.tb-item-tel1::after,
  .topbar-info.tb-item-tel-alt::after,
  .topbar-info.tb-item-horario::after {
    top: 50% !important;
    bottom: auto !important;
    height: 50% !important;
    background-color: #D59B02 !important;
    opacity: 0.5 !important;
    transform: translateY(-50%) !important;
  }
}
/* Hasta 1023px: mostrar La Empresa en topbar */
@media (max-width: 1023px) {
  .topbar .tb-item-empresa {
    display: flex !important;
  }
}

@media (min-width: 768px) and (max-width: 829px) {
  .topbar .tb-empresa-wrap,
  .topbar .tb-item-empresa {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .topbar .tb-productos-wrap,
  .topbar .tb-item-productos {
    display: flex !important;
  }
}
/* 0px - 659px: mostrar La Empresa en topbar */
@media (max-width: 659px) {
  .topbar .tb-item-empresa {
    display: flex !important;
  }
}
/* 0px - 659px: ocultar Servicios en topbar */
@media (max-width: 659px) {
  .topbar .tb-item-servicios {
    display: none !important;
  }
}
@media (max-width: 929px) {
  .topbar .tb-servicios-wrap,
  .topbar .tb-item-servicios {
    display: none !important;
  }
}

@media (min-width: 930px) {
  .topbar .tb-servicios-wrap,
  .topbar .tb-item-servicios {
    display: flex !important;
  }
}

/* 0px - 339px: mostrar teléfono alterno en topbar */
@media (max-width: 339px) {
  .topbar .tb-phone-alt {
    display: flex !important;
  }
}
/* 340px - 377px: mostrar teléfono alterno en topbar */
@media (min-width: 340px) and (max-width: 377px) {
  .topbar .tb-phone-alt {
    display: flex !important;
  }
}

@media (max-width: 539px) {
  .topbar .tb-item-empresa {
    display: none !important;
  }
}

@media (min-width: 540px) and (max-width: 569px) {
  .topbar .tb-empresa-wrap,
  .topbar .tb-item-empresa {
    display: none !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .topbar .tb-empresa-wrap,
  .topbar .tb-item-empresa {
    display: none !important;
  }
}

@media (max-width: 429px) {
  .tb-phone-alt .tb-phone-country {
    display: none !important;
  }
}

@media (max-width: 389px) {
  .topbar .tb-item-ciudad {
    display: none !important;
  }
  .topbar .tb-phone-main strong::before,
  .topbar .tb-phone-alt strong::before {
    content: "Bogotá - ";
  }
}

@media (max-width: 349px) {
  .topbar .tb-phone-alt strong::before {
    content: "Bogotá, ";
  }
}

@media (max-width: 379px) {
  .topbar .tb-item-ciudad {
    display: flex !important;
  }

  .topbar .tb-phone-alt strong::before {
    content: "" !important;
  }
}

@media (max-width: 369px) {
  .topbar .tb-item-ciudad {
    display: none !important;
  }

  .topbar .tb-phone-alt strong::before {
    content: "Bogotá - " !important;
  }

  .tb-productos-text-long {
    display: none !important;
  }

  .tb-productos-text-short {
    display: inline !important;
  }

  .topbar-link.tb-item-productos::before {
    width: 0px !important;
  }
}

@media (min-width: 380px) and (max-width: 389px) {
  .topbar-link.tb-item-productos::before {
    width: 0px !important;
  }
}

@media (max-width: 500px) {
  .topbar-info.tb-item-tel-alt::after {
    width: 1px !important;
  }
}

@media (max-width: 439px) {
  .topbar-info.tb-item-tel-alt::after {
    width: 0px !important;
  }
}

.topbar .topbar-link--cta i,
.topbar .topbar-link--cta:hover i {
  color: var(--sppb-secondcolor) !important;
  font-weight: bold !important;
}