/* S10 Por sector. Banda oscura a sangre. */

.sectores {
  position: relative;
  overflow: hidden;
  padding: 72px 20px;
}

.sectores__interior {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sectores__columna {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sectores__encabezado {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sectores__titulo {
  color: #fff;
  text-wrap: balance;
}

.sectores__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sectores__sector {
  display: block;
}

.sectores__nombre {
  font: 400 var(--fs-h3)/1.22 var(--fd);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.35);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.sectores__sector[aria-current="true"] .sectores__nombre {
  color: #fff;
  border-bottom-color: #fff;
}

.sectores__sector:hover .sectores__nombre {
  color: #fff;
}

/* ---- Las tarjetas ---- */

.sectores__escena {
  position: relative;
  overflow: hidden;
  margin: 0 -20px;
  padding: 0 20px;
}

.sectores__panel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sectores__panel::-webkit-scrollbar {
  display: none;
}

.sectores__panel[aria-hidden="true"] {
  display: none;
}

.sectores__cinta {
  display: flex;
  gap: 12px;
}

.sectores__tarjeta {
  position: relative;
  /* El 78% del ancho útil. En móvil el contenido empieza a 40 px de cada
     borde (raíl a 24 px más 16 px de sangría), así que el ancho útil es la
     pantalla menos 80 px. */
  flex: 0 0 calc(0.78 * (100vw - 80px));
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #0e1633;
  margin: 0;
  scroll-snap-align: center;
}

.sectores__tarjeta-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo que deja leer el logotipo sobre la foto. */
.sectores__tarjeta-pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  min-height: 45%;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(3, 8, 27, 0.75), rgba(3, 8, 27, 0));
}

.sectores__tarjeta-logo {
  display: block;
  height: var(--alto, 32px);
  width: var(--ancho, auto);
  max-width: 180px;
  object-fit: contain;
  object-position: left bottom;
  filter: brightness(0) invert(1);
}

/* Los que ya vienen en blanco se usan tal cual: el filtro los aplastaría
   a una mancha, que es lo que pasa con los escudos de fútbol. */
.sectores__tarjeta-logo--blanco {
  filter: none;
}

.sectores__tarjeta-nombre {
  font: 600 var(--fs-pequeno)/1.25 var(--fb);
  color: #fff;
}

@keyframes mgSecUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

/* En móvil el carrusel arranca en el raíl, que está a 24 px, no a 20:
   CLAUDE.md dice que los carruseles salen alineados con la línea. */
@media (max-width: 767px) {
  /* La sangría de 24 la pone la regla de bandas oscuras de rejilla.css;
     aquí solo se saca la escena del carrusel para que la primera tarjeta
     caiga justo en el raíl y la cinta siga saliéndose por la derecha. */
  .sectores__escena {
    margin: 0 -24px;
    padding: 0 24px;
  }
}

@media (min-width: 1100px) {
  .sectores {
    padding: 0 clamp(20px, 5.5cqi, 80px);
  }

  .sectores__interior {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--gi);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(32px, 4cqi, 64px);
    max-height: 820px;
    align-items: stretch;
  }

  .sectores__columna {
    justify-content: center;
    gap: 40px;
    padding: 128px 0;
  }

  .sectores__nombre {
    font-size: var(--fs-h3);
    white-space: nowrap;
  }

  .sectores__escena {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  /* En escritorio las tarjetas se apilan y suben en bucle. */
  .sectores__panel {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
  }

  .sectores__panel[aria-hidden="true"] {
    display: block;
  }

  .sectores__panel:not([aria-hidden="true"]) {
    opacity: 1;
    pointer-events: auto;
  }

  .sectores__cinta {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    animation: mgSecUp 72s linear infinite;
    will-change: transform;
  }

  .sectores__tarjeta {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sectores__cinta {
    animation: none;
  }
}

/* Mientras la foto no exista, la tarjeta se queda en un azul liso de la
   escala, dos tonos por encima del fondo de la sección, con el logotipo
   del cliente igual que si hubiera foto. */
.sectores__tarjeta--sinfoto {
  background: var(--raised);
}

.sectores__tarjeta--sinfoto .sectores__tarjeta-pie {
  background: none;
}

/* ---- La cinta también avanza sola en móvil ---- */

/* En escritorio las tarjetas suben en bucle; en móvil iban solo a mano, y
   la sección parecía parada. Ahora avanzan solas hacia la izquierda, con la
   lista duplicada para que no haya costura. Se puede seguir pasando a mano:
   al tocar, la animación se para. */
@media (max-width: 1099px) {
  .sectores__panel {
    overflow-x: hidden;
    scroll-snap-type: none;
  }

  .sectores__cinta {
    width: max-content;
    animation: mgSecIzq 48s linear infinite;
    will-change: transform;
  }

  .sectores__panel:active .sectores__cinta,
  .sectores__cinta:hover {
    animation-play-state: paused;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .sectores__cinta {
    animation: none;
  }

  @media (max-width: 1099px) {
    .sectores__panel {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
  }
}