/* ============================================================
   07-marquee.css — Ticker corporativo
   ============================================================ */

.marquee {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #FFFFFF;
  padding-block: 16px;
  border-block: 1px solid var(--navy-700);
}

.marquee--light {
  background: var(--bg-soft);
  color: var(--navy-900);
  border-color: var(--line);
}

.marquee--accent {
  background: var(--orange-500);
  color: #FFFFFF;
  border-color: var(--orange-600);
}

.marquee__track {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  width: max-content;
  animation: marquee-slide 36s linear infinite;
}

.marquee--reverse .marquee__track { animation-direction: reverse; }

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.marquee__item--small {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.marquee__star {
  display: inline-flex;
  width: clamp(16px, 1.8vw, 24px);
  aspect-ratio: 1;
  color: var(--orange-500);
}

.marquee--accent .marquee__star { color: rgba(255,255,255,0.7); }

.marquee__dot {
  width: 6px;
  height: 6px;
  background: var(--orange-500);
  border-radius: 50%;
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pay-methods con logos reales */
.paymethods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  padding-block: var(--space-5);
}

.paymethod {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  transition: all var(--dur-fast);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.paymethod:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--navy-700);
}
.paymethod svg {
  height: 100%;
  width: auto;
  display: block;
}
.paymethod--more {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  gap: 6px;
}
.paymethod--more::before {
  content: "+";
  color: var(--orange-500);
  font-weight: 700;
  font-size: 16px;
}