/* ============================= */
/* BASE */
/* ============================= */

.c-what{
  position: relative;
  padding: clamp(80px, 10vh, 120px) 0;
}

.c-what__container{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

/* ============================= */
/* MOBILE BLOCKS DEFAULT */
/* ============================= */

.c-what__mobile-block{
  display:none;
}

/* ============================= */
/* STICKY */
/* ============================= */

.c-what__sticky{
  position: sticky;
  top: 120px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 54px;

  align-items: center;
}

/* ============================= */
/* LEFT */
/* ============================= */

.c-what__left{
  max-width: 560px;
}

.c-what__title{
  margin: 0 0 36px;

  font-family: "Lexend Deca", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.15;

  color: #291F46;

  transition: color .3s ease;
}

/* LISTA */

.c-what__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-what__item{
  margin: 0;
  padding: 14px 0;

  border-bottom: 1px solid rgba(41,31,70,.18);

  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;

  color: #291F46;

  opacity: .28;
  transform: translateY(4px);

  transition:
	opacity .28s ease,
	color .28s ease,
	border-color .28s ease,
	transform .28s ease;
}

/* 👉 OCULTAR FASES CORRECTAMENTE */
.c-what__item[data-phase="yes"]{
  display: none;
}

.c-what.is-phase-yes .c-what__item[data-phase="no"]{
  display: none;
}

.c-what.is-phase-yes .c-what__item[data-phase="yes"]{
  display: block;
}

/* ACTIVO */

.c-what__item.is-active{
  opacity: 1;
  transform: translateY(0);
  font-weight: 600;
}

/* ============================= */
/* RIGHT */
/* ============================= */

.c-what__right{
  position: relative;
  width: 440px;
  height: 486px;

  justify-self: end;
}

/* STACK IMAGES */

.c-what__image{
  position: absolute;
  inset: 0;

  opacity: 0;
  transform: scale(.985);
  filter: blur(4px);

  transition:
	opacity .32s ease,
	transform .32s ease,
	filter .32s ease;
}

/* 👉 OCULTAR IMÁGENES POR FASE */
.c-what__image[data-phase="yes"]{
  display: none;
}

.c-what.is-phase-yes .c-what__image[data-phase="no"]{
  display: none;
}

.c-what.is-phase-yes .c-what__image[data-phase="yes"]{
  display: block;
}

.c-what__image.is-active{
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.c-what__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* ============================= */
/* FASE YES */
/* ============================= */

.c-what.is-phase-yes .c-what__left{
  order: 2;
  justify-self: end;
}

.c-what.is-phase-yes .c-what__right{
  order: 1;
  justify-self: start;
}

.c-what.is-phase-yes .c-what__title{
  color: #C98028;
}

.c-what.is-phase-yes .c-what__item{
  color: #C98028;
  border-color: rgba(201,128,40,.24);
  opacity: .28;
}

.c-what.is-phase-yes .c-what__item.is-active{
  color: #C98028;
  opacity: 1;
  font-weight: 600;
}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 991px){

  .c-what__container{
	width: calc(100% - 40px);
  }

  .c-what__sticky{
	position: relative;
	top: auto;

	grid-template-columns: 1fr;
	gap: 40px;
  }

  .c-what__left{
	order: 1;
	max-width: none;
  }

  .c-what__right{
	order: 2;
	width: min(100%, 420px);
	height: 460px;
	margin: 0 auto;
  }

}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 768px){
  
  /* quitar sticky */
  .c-what__sticky{
	position: relative;
	top: auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
  }

  /* ocultar imágenes */
  .c-what__right,
  .c-what__image{
	display: none !important;
  }

  /* reset total (base NO) */
  .c-what__item{
	display: block !important;
	opacity: 1;
	transform: none;
	font-weight: 400;
	color: #291F46;
	border-bottom: 1px solid rgba(41,31,70,.18);
  }

  /* IMPORTANTE: matar estados desktop */
  .c-what.is-phase-yes .c-what__item{
	color: #291F46;
	border-color: rgba(41,31,70,.18);
  }

  /* BLOQUE YES (manda por encima de TODO) */
  .c-what__item[data-phase="yes"],
  .c-what__item--yes{
	color: #C98028 !important;
	border-bottom: 1px solid rgba(201,128,40,.24) !important;
  }

  /* separación real entre bloques */
  .c-what__item[data-phase="no"]:last-of-type{
	margin-bottom: 32px;
  }

  /* título YES */
  .c-what__title--yes{
	margin-top: 32px;
	margin-bottom: 16px;
	color: #C98028;
  }
  
  /* MOBILE STRUCTURE */
  
  .c-what__title--desktop,
  .c-what__list--desktop,
  .c-what__right{
    display:none;
  }
  
  .c-what__mobile-block{
    display:block;
  }
  
  /* BLOQUE YES */
  
  .c-what__mobile-block--yes .c-what__title{
    color:#C98028;
    margin-top:2rem;
  }
  
  .c-what__mobile-block--yes .c-what__item{
    color:#C98028;
    border-bottom:1px solid rgba(201,128,40,.24);
  }

}