.carrusel-contenedor 
{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* El "track" que permite el movimiento */
.carrusel-track 
{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carrusel-track::-webkit-scrollbar 
{
    display: none; /* Oculta scrollbar en Chrome/Safari */
}

/* Cada tarjeta/slide dentro del carrusel */
.carrusel-item 
{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative; /* Clave para posicionar el texto adentro */
  box-sizing: border-box;
}

.slider__noticia--imagen img 
{
  width: 100%;
  object-fit: cover; /* Recorta proporcionalmente sin importar el tamaño original de la foto */
  display: block;
}

.slider__noticia--texto 
{
  position: absolute;
  bottom: 20px;

  background: rgba(51, 62, 72, 0.71); /* Tu fondo oscuro translúcido */
  width: 35vw;
  color: #fff;
  box-sizing: border-box; /* Evita que el padding sume ancho extra */
}

/* Estilo base de los botones (sin estilos inline) */
.carrusel-btn 
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #ffffff;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 25px; /* Un poco más pequeños en móviles */
  height: 25px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.carrusel-btn:hover 
{
  background: #f5f5f5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.carrusel-btn:active 
{
  transform: translateY(-50%) scale(0.95);
}

.btn-prev { left: 40px; }
.btn-next { right: 40px; }

.btn-prev 
{
  background-image: url(/images/icons/prev.svg) !important;
  background-position-x: 44% !important;
  background-repeat: no-repeat !important;
  background-size: 10px !important;
  background-position-y: center !important;
}

.btn-next 
{
  background-image: url(/images/icons/next.svg) !important;
  background-position-x: 55% !important;
  background-repeat: no-repeat !important;
  background-size: 10px !important;
  background-position-y: center !important;
}

@media (max-width: 768px) 
{
  .slider__noticia--imagen img 
  {
    width: 400px; margin-right: 30px;
  }
  
  .carrusel-btn 
  {
    width: 30px; /* Un poco más pequeños en móviles */
    height: 30px;
    font-size: 1.4rem;
  }
  
  .btn-prev { left: 10px; }
  .btn-next { right: 10px; }
}