/* Sección */
.news {
  position: relative;
  padding: 1rem 0 2rem;
  background: transparent;
  overflow: visible; /* Asegura que la trama no recorte ni empuje */
}

.news::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

.news::before {
  top: -10px; /* o el valor necesario para que sobresalga */
  left: 0;
  background-image: url('../../../assets/img/150a/nuevo/trama.svg');
}

/* Viewport: muestra exactamente 3 cards (360px máx) + 2 gaps (1rem) */
.news__viewport{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

/* Carrusel */
.news__carousel{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 2rem;   
  scrollbar-width: none;
}
.news__carousel::-webkit-scrollbar{ display: none; } 

/* Tarjeta: tamaño fijo (no se estira) */
.news-card{
  min-width: 250px;
  max-width: 350px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Contenido de la tarjeta (tus estilos) */
.news-card-inner{
  background: #fff;
  border: 2px solid #1E4370;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 420px;
  transition: box-shadow .2s ease-in-out;
}

.news-card-img{
  width:100%;
  height:180px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:.25rem;
  margin-bottom:.5rem;
}

.news-card-title{
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.5rem;
  color:#1E4370;
  line-height:1.3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  block-size:calc(1.25rem * 1.3 * 2);
}

.news-card-desc{
  font-size:.875rem;
  color:#5B5B66;
  min-height:4.5em;
  margin-bottom:.5rem;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  block-size:calc(.875rem * 1.4 * 3);
}

.news-card-link{
  color:#00B2A9;
  text-decoration:none;
  margin-top:auto;
  font-weight:500;
  align-self:flex-start;
}
.news-card-link:hover{ text-decoration:underline; }

/* Flechas (colorean por currentColor) */
.news__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:50px; height:50px;
  border-radius:999px;
  background: transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:grid; place-items:center;
  color:#1E4370;                 /* << color real de las flechas */
  text-decoration:none;
  outline:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.news__arrow:hover{ transform:translateY(-50%) scale(.97); }
.news__arrow:focus-visible{ box-shadow:0 0 0 3px rgba(30,67,112,.25); }
.news__arrow--left{ left:-.5rem; }
.news__arrow--right{ right:-.5rem; }
.news__arrow.is-disabled{ opacity:.4; pointer-events:none; }

/* SVG hereda el color de .news__arrow */
.news__arrow svg path{ fill: currentColor; }
.news__arrow svg [stroke]{ stroke: currentColor; }

/* Header azul (como tenías) */
.border-blue{
  background-color: #1E4370 !important;
  width:100%;
  height:6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:3rem;
}
.border-blue .tituloCardligth-noti{
  margin:0;
  color:inherit;
  font-weight:300;
  font-size:2rem;
  color:#fff !important;
}

.arrow-left {
  transform: rotate(180deg);
}


/* Responsive: en <1200px, liberar el viewport para que entre 2/1 naturalmente */
@media (max-width:1199px){
  .news__viewport{ max-width:none; }
  .news__carousel{ padding:0 3.5rem; } /* si querés más aire en mobile */
}

@media (max-width: 767px) {
  .news__carousel {
    margin-left:1rem;
    padding: 0 1rem;
  }
  .news__arrow--left,
  .news__arrow--right {
    display: none !important; /* Oculta las flechas en mobile */
  }
  .news-card {
    min-width: 80vw;
    max-width: 85vw;
  }
  .news__viewport {
    padding: 0;
  }
  html, body {
    overflow-x: hidden;
  }
  .border-blue {
    width: 100vw !important;
    min-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
  }		
	  .border-blue .tituloCardligth-noti {
		text-align: left !important;
		font-weight: 400 !important;
		color:  #fff !important;
		font-size: 1.4rem !important;
		line-height: 1.1 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	  }
  
}