@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Roboto:wght@300;400;500;900&display=swap");

.contenedor-areas {  position: relative;  width:86%;  margin: 0 auto;  column-gap: 3rem;  padding-block: min(20vh, 3rem);}

.bg {  position: fixed;  top: -4rem;  left: -12rem;  z-index: -1;  opacity: 0;}

.bg2 {  position: fixed;  bottom: -2rem;  right: -3rem;  z-index: -1;  width: 9.375rem;  opacity: 0;}

.contenedor-areas > div span {  text-transform: uppercase;  letter-spacing: 1.5px;  font-size: 1rem;  color: #717171;}

.contenedor-areas > div h1 {
  text-transform: capitalize;  letter-spacing: 0.8px;  font-family: "Roboto", sans-serif;  font-weight: 900;
  font-size: clamp(3.4375rem, 3.25rem + 0.75vw, 4rem);  background-color: #005baa;
  background-image: linear-gradient(45deg, #005baa, #000000);
  background-size: 100%;  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.contenedor-areas > div hr {  display: block;  background: #005baa;  height: 0.25rem;  width: 6.25rem;  border: none;  margin: 1.125rem 0 1.875rem 0;}

.contenedor-areas > div p {  line-height: 1.6;}

.swiper {  width: 100%;}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active{background: #fff;}

.swiper-pagination{  bottom: 1.25rem !important;}
.swiper-slide{height: 34vw; display: flex; flex-direction: column; justify-content: end; align-items: self-start;}
.swiper-slide h2{ color: #fff;font-size: 1.5vw; line-height: 1.4; margin-bottom: 0.625rem; padding: 0 0 0 1.563rem; text-transform: uppercase;}
.swiper-slide p{color: #dadada;padding: 0 1.563rem;line-height: 1.6;font-size:1.3vw; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;overflow: hidden;}
.swiper-slide div{ display: none; opacity: 0; padding-bottom: 10%; }
.swiper-slide-active div{ display: block; opacity: 1; }

.swiper-slide--one {
  background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
    url("/web/images/layout/areas/1_deportistas.jpg?v=1") no-repeat 50% 50% / cover;
}
.swiper-slide--two {
  background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
    url("/web/images/layout/areas/2_veggie.jpg?v=1") no-repeat 50% 50% / cover;
}
.swiper-slide--three {
  background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
    url("/web/images/layout/areas/3_Diabetes.jpg?v=1") no-repeat 50% 50% / cover;
}
.swiper-slide--four {
  background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
    url("/web/images/layout/areas/4_composicion.jpg?v=1") no-repeat 50% 50% / cover;
}
.swiper-slide--five {
  background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
    url("/web/images/layout/areas/5_suplementos.jpg?v=1") no-repeat 50% 50% / cover;
}
.swiper-slide--six {
    background: linear-gradient(to top, rgb(15, 32, 39), rgba(32, 58, 67, 0.368), rgba(44, 83, 100, 0)),
      url("/web/images/layout/areas/6_recetas.jpg?v=1") no-repeat 50% 50% / cover;
  }
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right { background-image: none; }

@media only screen and (max-device-width : 768px)
{  
  .contenedor-areas{ position: relative;  width:100%;column-gap: 3rem;    padding-block: min(20vh, 3rem);  }
  .swiper-slide{height: 100%; }
  .swiper{ width: 85%;}
}
@media screen and (min-width: 48rem){ .contenedor-areas{display: flex;align-items: center;} .bg,.bg2{opacity: 0.1;} }
@media screen and (min-width: 93.75rem){ .swiper{ width: 85%;} }