﻿/* ============================================================
   TICKER-BAR — Estilos completos
   pinturaelectrostaticacolombia.com
   ============================================================ */

/* ══════════════════════════════════════════════
   NEUTRALIZAR WRAPPERS DE JOOMLA / BOOTSTRAP
═══════════════════════════════════════════════ */
section#sp-ticker-bar {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}
section#sp-ticker-bar > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
section#sp-ticker-bar .container-inner {
  padding: 0 !important;
  margin: 0 !important;
}
section#sp-ticker-bar .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
section#sp-ticker-bar [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 100%;
  max-width: 100%;
}
section#sp-ticker-bar .sp-column,
section#sp-ticker-bar .sp-module,
section#sp-ticker-bar .sp-module-content,
section#sp-ticker-bar .mod-custom {
  padding: 0 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════
   TICKER-BAR — Contenedor
═══════════════════════════════════════════════ */
.ticker-bar {
  background: #1a1a1a;
  border-bottom: 1px solid #FFC72C;
  padding: 7px 0;
  min-height: 39px;
  overflow: hidden;
  position: relative;
  z-index: 940;
  width: 100%;
}

/* ══════════════════════════════════════════════
   TICKER CONTENT — Animación de desplazamiento
═══════════════════════════════════════════════ */
.ticker-content {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 110s linear infinite;
}
.ticker-content:hover {
  animation-play-state: paused;
}

.ticker-content span {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.06em;
  padding: 0 40px;
  flex-shrink: 0;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

/* Puntos naranjas antes y después de cada frase */
.ticker-content span::before,
.ticker-content span::after {
  content: '';
  width: 5px;
  height: 5px;
  background: #FFC72C;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   KEYFRAME — scroll continuo infinito
   El contenido se duplica en el HTML para que
   el loop sea perfectamente continuo
═══════════════════════════════════════════════ */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ticker-content              { animation-duration: 110s; }
  .ticker-content span         { font-size: 1rem; padding: 0 24px; }
}
@media (max-width: 480px) {
  .ticker-content              { animation-duration: 110s; }
  .ticker-content span         { font-size: 1rem; padding: 0 16px; }
}

/* ══════════════════════════════════════════════
   FIXED — ticker-bar
   ≤500px y ≥1920px: pegado justo debajo del topbar
   --topbar-h lo calcula el JS con la altura real
═══════════════════════════════════════════════ */
@media (max-width: 500px) {
  section#sp-ticker-bar {
    position: fixed !important;
    top: var(--topbar-cabezote-h, 140px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 949 !important;
  }
}
@media (min-width: 501px) and (max-width: 1919px) {
  section#sp-ticker-bar {
    position: relative !important;
  }
}
@media (min-width: 1600px) and (max-width: 1919px) {
  section#sp-ticker-bar {
    display: block !important;
    position: fixed !important;
    top: var(--topbar-cabezote-h, 140px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 949 !important;
  }
}
@media (min-width: 1920px) {
  section#sp-ticker-bar {
    display: block !important;
    position: fixed !important;
    top: var(--topbar-cabezote-h, 140px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 940 !important;
  }
}

/* Hasta 1023px: igualar tamaño visual del ticker con el header escalado desde 1024px */
@media (max-width: 1023px) {
  .ticker-bar {
    padding: 6px 0 !important;
    min-height: 33px !important;
  }
  .ticker-content span {
    font-size: 0.85rem !important;
  }
}
                                                                                                                                                                                                                                                                                                                                                                                                                                          

