﻿/* ============================================================
   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: 2px solid #27B5C9;
  padding: 0;
  height: 40px;
  min-height: 40px;
  overflow: hidden;
  position: relative;
  z-index: 940;
  width: 100%;
}

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

.ticker-content span {
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  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: 0;
  background-image: linear-gradient(to bottom, transparent 0, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.55) 100%, transparent 100%);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 1px 60%;
  transform: translateY(-2px);
}

/* Puntos naranjas antes y después de cada frase */
.ticker-content span::before,
.ticker-content span::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #2ACDC9;
  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: 135s; }
  .ticker-content span         { font-size: 13.5px; padding: 0 24px; }
}
@media (max-width: 480px) {
  .ticker-content              { animation-duration: 135s; }
  .ticker-content span         { font-size: 13.5px; 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: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .ticker-content {
    height: 40px !important;
  }
  .ticker-content span {
    font-size: 13.5px !important;
  }
}

/* Hasta 575px: escalar el ticker completo como una sola pieza al 90% */
@media (max-width: 575px) {
  .ticker-bar {
    width: 111.111111% !important;
    transform: scale(0.90) !important;
    transform-origin: top left !important;
    margin-bottom: -4.3px !important;
    height: 43px !important;
    min-height: 43px !important;
  }

  .ticker-content {
    height: 43px !important;
  }
}

/* 501px a 575px: eliminar línea blanca entre ticker y slider */
@media (min-width: 501px) and (max-width: 575px) {
  .ticker-bar {
    margin-bottom: -5.3px !important;
  }
}
                                                                                                                                                                                                                                                                                                                                                                                                                                          

