/* Componente único para flechas de carruseles y galerías.
   Las clases del carrusel conservan su posición y comportamiento. */
.c-carousel-arrow.c-carousel-arrow {
  --carousel-arrow-color: var(--cyber-blue);
  --carousel-arrow-bg: rgba(255,255,255,.9);
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: 0;
  padding: 0;
  border: 2px solid var(--carousel-arrow-color);
  border-radius: 50%;
  background: var(--carousel-arrow-bg);
  color: var(--carousel-arrow-color);
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color .2s ease, color .2s ease;
}
.c-carousel-arrow.c-carousel-arrow:hover {
  border-color: var(--cyber-sky);
  color: var(--cyber-sky);
}
.c-carousel-arrow.c-carousel-arrow:focus-visible {
  outline: 3px solid var(--cyber-lima);
  outline-offset: 3px;
}
.c-carousel-arrow::before { content: none; }
.c-carousel-arrow.c-carousel-arrow--prev::after,
.c-carousel-arrow.c-carousel-arrow--next::after {
  content: "";
  display: block;
  flex: none;
  width: 11px;
  height: 11px;
  margin: 0;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}
.c-carousel-arrow.c-carousel-arrow--prev::after { transform: translateX(2px) rotate(-135deg); }
.c-carousel-arrow.c-carousel-arrow--next::after { transform: translateX(-2px) rotate(45deg); }
.home-hero-carousel[data-active-theme="dark"] .c-carousel-arrow,
.mod-da-lightbox .c-carousel-arrow {
  --carousel-arrow-color: #fff;
  --carousel-arrow-bg: rgba(22,20,93,.65);
}
.home-hero-carousel[data-active-theme="light"] .c-carousel-arrow,
.home-hero-carousel[data-active-theme="neutral"] .c-carousel-arrow {
  --carousel-arrow-color: var(--cyber-blue);
  --carousel-arrow-bg: rgba(255,255,255,.9);
}
@media (max-width: 992px) {
  .c-carousel-arrow.c-carousel-arrow { width: 42px; height: 42px; }
}
@media (max-width: 640px) {
  .c-carousel-arrow.c-carousel-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-carousel-arrow.c-carousel-arrow { transition: none; }
}