{% scope_css %}

:root {
  --background-primary: #a3161a;
  --background-secondary: #FCD116;
  --text-color-primary: #495057;
  --transition: all 0.3s ease;
}
.programs-carrousel,
.programs-carrousel * {
  box-sizing: border-box !important;
}
.programs-carrousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}
.programs-carrousel__header { 
  margin-bottom: 50px; 
}
.programs-carrousel__title { 
  color: var(--background-primary); 
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 15px;
}
.programs-carrousel__description {
  color: var(--text-color-primary); 
  max-width: 800px; margin: 0 auto;
  font-family: Red Hat Display, sans-serif !important;
  font-size: clamp(16px, 2vw, 18px); 
}
.programs-carrousel__container { 
  position: relative; 
}
.programs-carrousel__slides {
  display: flex;
  gap: 20px;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-x; 
  padding-bottom: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.programs-carrousel__slides::-webkit-scrollbar {
  display: none;
}
.programs-carrousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.programs-carrousel__card { 
  border: 1px solid var(--background-primary); 
  border-radius: 6px; 
  overflow: hidden; 
  background-color: #FFFFFF; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
  height: 100%; text-align: left; 
  transition: var(--transition);
}
.programs-carrousel__card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}
.programs-carrousel__card-image { 
  height: 220px; 
  background-size: cover; 
  background-position: center; 
}
.programs-carrousel__card-content { 
  padding: 25px; 
}
.programs-carrousel__card-title { 
  font-size: 1.2rem; 
  font-weight: 700; 
  text-align: center; 
}
.programs-carrousel__card-title a { 
  color: var(--text-color-primary); 
  text-decoration: none; 
}

.programs-carrousel__button { 
  position: absolute; 
  top: 40%; 
  z-index: 10; 
  width: 45px; 
  height: 45px; 
  padding: 0; 
  border-radius: 50%; 
  flex-shrink: 0; 
  background-color: var(--background-secondary); 
  border: 1px solid var(--background-secondary); 
  cursor: pointer; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
  transition: var(--transition); 
  display:none
}
.programs-carrousel__button.is-visible {
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.programs-carrousel__button:hover, 
.programs-carrousel__button:focus { 
  background-color: var(--background-primary);
  border-color:var(--background-secondary);
}
.programs-carrousel__button:hover svg,
.programs-carrousel__button:focus svg{ 
  fill:var(--background-secondary) 
}
.programs-carrousel__button--prev { 
  left: 0; 
  transform: translateX(-50%); 
}
.programs-carrousel__button--next { 
  right: 0; 
  transform: translateX(50%); 
}
.programs-carrousel__button svg { 
  width: 28px; 
  height: 28px; 
  fill: var(--background-primary); 
}

@media (min-width: 768px) and (max-width: 991px) {
  .programs-carrousel__slide {
    flex-basis: 48.8%;
  }
}
@media (min-width: 992px) {
  .programs-carrousel__slide {
    flex-basis: 32.1%; 
  }
}
{% end_scope_css %}