/* ===== Divisor que se superpone a la unión entre secciones ===== */
.marquee-divider {
  --h: clamp(54px, 8vw, 86px); /* altura de cada banda */
  position: relative;
  /* CAMBIO: Aumentamos la altura para dar espacio a las puntas rotadas */
  height: calc(var(--h) * 2.1); 
  margin-top: calc(
    var(--h) * -1.15
  ); 
  margin-bottom: calc(
    var(--h) * -1.45 
  ); 
  z-index: 5; 
  pointer-events: none; 
  overflow: hidden;
}

/* ===== Bandas ===== */
.band {
  position: absolute;
  left: 50%;
  width: 100vw; /* Mantenemos el ancho extra */
  height: var(--h);
  transform-origin: center;
  border-radius: 0px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Superior (Degradado) */
.band--top {
    top: 18px;
    transform: translateX(-50%) rotate(1.5deg);
    background: linear-gradient(92.09deg, #1b94d6 0.93%, #584990 50%, #ce6174 99.07%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* Inferior (Blanca) */
.band--bottom {
  /* CAMBIO: Mayor solapamiento para cerrar el hueco */
  bottom: 4px; 
  /* Tu rotación ajustada */
  transform: translateX(-50%) rotate(-0.65deg); 
  background: #fff;
  color: #0b0b0b;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1);
}

/* Pista animada */
.track {
  position: relative;
  display: flex;
  gap: 0;
  will-change: transform;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Un bloque “patrón” que se repetirá */
.group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 30px);
  white-space: nowrap;
  padding: 0 clamp(18px, 3vw, 30px);
  flex-shrink: 0;
}

/* Tipografía */
.group span {
  font-weight: 700;
  font-size: clamp(20px, 5vw, 60px);
  line-height: 1;
  letter-spacing: 0.2px;
}

/* Separadores */
.band--top .sep {
  opacity: 1;
}
.band--bottom .sep {
  opacity: 1;
}

/* Direcciones */
.track--left {
  animation-name: marquee-left;
}
.track--right {
  animation-name: marquee-right;
}

/* Animación para la izquierda */
@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Animación para la derecha */
@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Responsive (Desktop primero, luego ajustes mobile) */

/* Mobile (<= 600px) - Mantenemos tus ajustes */
@media (max-width: 600px) {
  .marquee-divider {
     /* Ajustamos márgenes si es necesario para mobile */
     margin-top: calc(var(--h) * -0.8);
     margin-bottom: calc(var(--h) * -1.4);
  }
  .band--top { 
    top: 8px; /* Tu ajuste mobile */
    /* Podrías necesitar ajustar la rotación aquí si quieres que sea diferente en mobile */
    /* transform: translateX(-50%) rotate(OTRO_ANGULO_deg); */
  } 
  .band--bottom { 
    bottom: 5px; /* Tu ajuste mobile */
    transform: translateX(-50%) rotate(-0.95deg);
    /* Podrías necesitar ajustar la rotación aquí si quieres que sea diferente en mobile */
    /* transform: translateX(-50%) rotate(OTRO_ANGULO_deg); */
  } 
  .band {
     width: 180vw; /* Quizás necesite ser aún más ancho en mobile por los ángulos */
  }
}