/*
 * Styles for Dynamic Marquee with Areas de Practica
 * Archivo: css/marquee.css (o un nuevo marquee.css)
 */

.skylaw-marquee {
  width: 100%;
  height: 180px; /* Doble altura para dos filas */
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background-color: var(--skylaw-slider-color-primary);
  padding: 0 10px;
  margin: 10px 0; /* Espaciado sutil arriba y abajo */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skylaw-marquee__row {
  width: 100%;
  height: 90px; /* Altura para cada fila */
  overflow: hidden;
  position: relative;
  display: flex; /* Para que el contenido del UL ocupe el 100% de la altura */
  align-items: center; /* Centra verticalmente los elementos de la lista */
}

/* Clases para direccionar las filas, que usaremos en JS */
.skylaw-marquee__row--right .skylaw-marquee__content {
  transform: translateX(0); /* Posición inicial para la fila derecha */
}

.skylaw-marquee__row--left .skylaw-marquee__content {
  transform: translateX(-33.3333%); /* Posición inicial para la fila izquierda, invertida */
}


.skylaw-marquee__content {
  display: flex; /* Permite que los elementos fluyan horizontalmente */
  /* list-style: none; */ /* Ya no es una lista, así que esto es opcional */
  margin: 0;
  padding: 0;
  white-space: nowrap;
  height: 100%;
  align-items: center; /* Centra verticalmente el contenido dentro de la línea */
}

.skylaw-marquee__item {
  flex-shrink: 0;
  margin-right: 30px; /* Espacio entre cada item del marquee */
  display: flex; /* Añadido para ayudar a alinear el span si fuera necesario */
  align-items: center; /* Centra el span verticalmente dentro del item */
  height: 100%; /* Asegura que el item ocupe la altura disponible para el centrado */
}

/* CÓDIGO MODIFICADO: Aplicamos estilos de h2 al nuevo span */
.skylaw-marquee__item span {
    margin: 0; 
    padding: 0; 
    font-size: clamp(30px, 3.5vw, 60px); 
    font-family: 'Nunito', sans-serif;
    line-height: 1; 
    display: flex; 
    align-items: center; 
}

/* CÓDIGO MODIFICADO: Selectores de enlace de h2 a span */
.skylaw-marquee__item span a {
  text-decoration: none;
  color: white; 
  transition: color 0.3s ease;
  text-transform: uppercase; 
}

/* CÓDIGO MODIFICADO: Selectores de hover de h2 a span */
.skylaw-marquee__item span a:hover {
  color: var(--skylaw-slider-color-secundary);
}

/* Estilos para el bullet */
/* CÓDIGO MODIFICADO: El bullet está dentro del span */
.skylaw-marquee__bullet {
    margin-left: 5px; 
    margin-right: 5px; 
    font-size: clamp(30px, 3.5vw, 60px); 
    font-weight: 700; 
    line-height: 1; 
    display: inline-block; 
}

/* Color del bullet para la fila de la derecha (arriba) */
.skylaw-marquee__row--right .skylaw-marquee__bullet {
    color: #c6a96f; 
}

/* Color del bullet para la fila de la izquierda (abajo) */
.skylaw-marquee__row--left .skylaw-marquee__bullet {
    color: #b2b2b2; 
}

/* Alternar negrita y normal para los textos */
/* CÓDIGO MODIFICADO: Selectores de alternancia de h2 a span */
.skylaw-marquee__item:nth-child(odd) span a {
    font-weight: 700; /* Negrita para elementos impares*/
}

/* CÓDIGO MODIFICADO: Selectores de alternancia de h2 a span */
.skylaw-marquee__item:nth-child(even) span a {
    font-weight: normal; /* Normal para elementos pares*/
}