@import url('shared.css');

.muestra-div {
  background: #468AC4;
  padding: var(--spacing-xl);
  box-shadow: 0 10px 30px var(--shadow-lg);
  margin-bottom: var(--spacing-xl);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

#root .muestra-div p,
#root .muestra-div h1,
#root .muestra-div h2,
#root .muestra-div h3,
#root .muestra-div h4,
#root .muestra-div li,
#root .muestra-div strong {
  color: white !important;
}

#root .muestra-div .section-title {
  color: white !important;
}

#root .muestra-div .galeria-overlay h4,
#root .muestra-div .galeria-overlay p {
  color: white !important;
}

#root .muestra-div .video-info h3 {
  color: var(--text-color) !important;
}

#root .muestra-div .video-info p {
  color: var(--light-text) !important;
}

#root .muestra-div .slider-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--secondary-color);
}

#root .muestra-div .slider-btn:hover {
  background: var(--primary-color);
  color: white;
}

#root .muestra-div .slider-dot {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}

#root .muestra-div .slider-dot.active {
  background: white;
}

#root .muestra-div .slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

#root .muestra-div .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}