/* ===== Indicadores ===== */
#heroCarousel .carousel-indicators [data-bs-target]{
  width:.9rem;
  height:.9rem;
  border-radius:50%;
  background:rgba(255,255,255,.85);               /* blanco base */
  border:2px solid var(--brand);          /* borde azul */
  opacity:1;
  transition:all .2s ease;
}
#heroCarousel .carousel-indicators .active{
  background-color: var(--brand);         /* activo = azul sólido */
}


/* ===== Controles prev/next ===== */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width:3rem;
  height:3rem;
  top:50%;
  transform:translateY(-50%);
  background:#fff;                        /* fondo blanco */
  border-radius:50%;
  opacity:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, box-shadow .2s ease;
  background:rgba(255,255,255,.65);
  margin: 20px;
}
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover{
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* Flechitas en azul brand */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon{
  background-size:1.2rem 1.2rem;
  filter: none;                           /* no invertir */
  background-image: none;                 /* resetea default de Bootstrap */
  mask-size: contain;
  -webkit-mask-size: contain;
  width:1.2rem;
  height:1.2rem;
  background-color: var(--brand);
  
}

/* SVG personalizado usando mask (para que se pinte en azul) */
#heroCarousel .carousel-control-prev-icon{
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") no-repeat center;
}

#heroCarousel .carousel-control-next-icon{
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center;
}


/* Caption como chip centrado, no a todo el ancho */
#heroCarousel .carousel-caption{
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 3.8rem;                    /* un poco arriba de los indicadores */
  background: rgba(255,255,255,.65); /*rgba(2,85,139,.45);*/    /* brand con transparencia */
  border-radius: .6rem;
  padding: .65rem .9rem;
  display: inline-flex;              /* se ajusta al contenido */
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  width: auto;                       /* evita 100% de ancho */
  max-width: min(92%, 900px);        /* por si el texto es largo */
  text-shadow: none;
  z-index: 2;                        /* por encima de la imagen/indicadores */
}

/* Tipografía del caption */
#heroCarousel .carousel-caption h5{
  margin: 0 0 .2rem;
  font-weight: 700;
  color:var(--brand);
   font-size: 1.5em;
}
#heroCarousel .carousel-caption p{
  margin: 0;
  color:var(--brand);
  font-size: 1.2rem;
  font-weight: 600;
}

/* En móviles, dale un poquito más de aire arriba de los puntitos */
@media (max-width: 576px){
  #heroCarousel .carousel-caption{ bottom: 4.2rem; }
}