.hero-slider .hero {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero {
  position: relative;
  width: 100%;
  /*background-image: url("../img/bg-degrade.png");
  background-repeat: no-repeat;
  background-size: cover;*/
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  align-self: end;
}

/* IZQUIERDA */

.left {
  width: 100%;
  position: relative;
  align-self: end;
  margin-bottom: 25px;
}

.hero .logo img {
  width: 100%;
  height: auto;
  margin-bottom: 0px;
}

.main-image img{
  width: 100%;
}

/* DERECHA */

.right {
  color: white;
  align-self: start;
  padding-left: 60px;
  display: flex;
}

.right .person{
  margin-right:15px;
}

/*.right h2 {
  color: var(--primary);
  font-family: Rubik;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 10px auto;
}

.description {
  color: #FFF;
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 60px;
}


.hero.slideHero1 .description {
  color: #FFF;
  font-family: Lato;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}*/

.person h3 {
  color: var(--primary);
color: #009490;
font-family: Lato;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
  margin-bottom: 10px;
}

.socials {
  display: flex;
  gap: 20px;
}

.social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 0px;
  border-radius: 20px;
  color: #000;
  font-family: Lato;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.social .followers{
  color: #000;
}

.arroba{
  color: #000;
font-family: Lato;
font-size: 21px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.icon {
  background: yellow;
  color: black;
  font-weight: bold;
  font-size: 11px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

/* FLECHAS */

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  cursor: pointer;
  z-index: 5;
}

.arrow.left {
  left: 20px;
}

.arrow.right {
  right: 20px;
  text-align: right;
}

.slick-prev, .slick-next{
  width: 100px;
  height: 100px;
  z-index: 9999;
}

.hero-slider .slick-track {
  display: flex !important;
}

.hero-slider .slick-slide > div {
  width: 100%;
  height: 100%;
}

.followers-arroba{
  display: flex;
  flex-direction: column;
}

.wrapper{
  max-width:1180px;
  margin:0 auto;
  position:relative;
}

/* Línea punteada */
.wrapper::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:110px;
  border-left:2px dashed #1ba39c;
}

h1{
  text-align:center;
  color: #009490;
  font-family: Rubik;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 60px;
}

.grid{
  margin:0 auto;
}

/* 4 columnas reales */
.grid-item{
  width:292px;
  margin-bottom:24px;
}

.card{
  background:var(--primary);
  color:white;
  padding:20px;
  border-radius:10px;
  font-size:13px;
  line-height:1.5;
  height: 208px;
}
.card.card--dark{
  background:var(--darkgreen);
}
.card.card--mini{
  height: 60px;
}
.card.card--sm{
  height: 150px;
}
.card.card--md{
  height: 180px;
}
.card.card--xl{
  height: 440px;
}

.card h3{
 color: #FFF;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: normal;
  margin-bottom:10px;
  text-transform:uppercase;
}

.card p{
  color: #FFF;
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* IG STORY estilo botón */
.card.ig{
  background:#117a73;
  text-align:center;
  font-weight:700;
  letter-spacing:1px;
}

/* Responsive */
@media(max-width:1100px){
  .grid-item{
    width:45%;
  }
}

@media(max-width:768px){
  .grid-item{
    width:100%;
  }
}

.slick-slider{
  margin-bottom: 30px;
  overflow: hidden;
}

.slick-prev, .slick-next{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
}

.slick-prev{
  left: 0;
}

.slick-next::before{
  content: "";
  width: 25px;
  height: 25px;
  border-top: 8px solid #fff;
  border-right: 8px solid #fff;
  transform: rotate(45deg);
}

.slick-prev::before{
  content: "";
  width: 25px;
  height: 25px;
  border-top: 8px solid #fff;
  border-right: 8px solid #fff;
  transform: rotate(-135deg);
}

 .slick-slide .imgDesktopMobile{
  display: none;
}

.hero-slider .right{
  display: none;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
}

.contenedorMobile {
  display: none;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}

.contenedorMobile .card {
  background: var(--primary);
  color: #fff;
  padding: 14px;
  border-radius: 6px;
  height: initial;
}

.contenedorMobile .card.card--dark {
  background: var(--darkgreen);
}

.contenedorMobile .card h3 {
  color: #FFF;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin: 0 0 6px;
  font-weight: bold;
}

.contenedorMobile .card p {
  color: #FFF;
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

@media (max-width: 768px)  {

  .containerBlocks{
    display: none;
  }

  .contenedorMobile{
    display: grid;
     grid-template-columns: repeat(2, 1fr);
  }

  .contenedorMobile .card:nth-child(n+5) {
    grid-column: 1 / -1;
  }


 .slick-slide .imgDesktopSlide{
    display: none;
  }

 .slick-slide .imgDesktopMobile{
    display: block;
  }

 /* .hero-slider .slick-prev, .hero-slider .slick-next{
    display: none !important;
  }*/

  .slick-prev, .slick-next{
    top: 38% !important;
  }

  .containerBlocks h1{
    font-size: 28px;
  }

  .containerBlocks{
    padding: 0 15px;
  }

}