/*
Version: 1.0
Version: 1.1 Media Queries
Version: 1.2 P69 — Auditoria de estetica: boton circular rojo solido 48px
  (mismo patron que .pmg-btn del modal real de portafolio, P48/P50 - baja
  legibilidad reportada para el color/tamano anterior) en vez de icono
  flotante transparente con hover #00E5FF (fuera de la paleta del sitio).
  Indicadores pasan de barra rectangular (24x4, gris #A4A4A4) a punto
  circular pequeno, activo blanco solido. Reglas muertas .arrow-icon
  eliminadas (asumian fill/stroke="#F9F9F9" literal en el SVG; ningun
  markup real las usa, todos los SVG de flecha usan stroke="currentColor").
  Cambio global: afecta las 3 instancias que comparten este archivo
  (Noticias, Portafolio, Servicios) - decision del usuario, no acotado
  a una sola plantilla.
  border-radius de .carousel-container normalizado de "0 16px" (valor
  decorativo sin relacion con el resto del sitio) a 2px, consistente con
  .btn/.noticia-tag y el resto de componentes.
Version: 1.3 P16 — "Nuestra Historia" retirado de este comentario (arriba,
  P69): no conecta con ningun carrusel activo hoy, el enqueue real nunca
  incluyo is_page('nosotros'). Mismo fix que carousel.js ya tenia desde
  su v2.1 — quedaba desactualizado solo aca.
Autor: fcastillo@madis.cl
*/
/* Contenedor principal */
.carousel-container {
  position: relative;
  max-width: 800px;
  margin: 24px auto ;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 16 / 9;
}

/* El riel deslizable */
.carousel-track {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Botones de navegación — circulo rojo solido, icono blanco (P69,
   mismo patron que .pmg-btn: 48px, background rojo siempre visible,
   no solo en hover, por legibilidad) */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red);
  color: var(--static-white);
  transition: background-color .25s;
  z-index: 2;
}
.carousel-btn:hover,
.carousel-btn:focus-visible {
  background-color: var(--red-accent);
}
.carousel-btn svg { pointer-events: none; }
.prev { left: 15px; }
.next { right: 15px; }

.carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255,252,255,.4);
  transition: all 0.3s ease;
}
.indicator-dot.active {
  background-color: var(--static-white);
  filter: drop-shadow(0px 0px 4px rgba(255,252,255,.5));
}