@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat";
  color: black !important;
}
.guia_compras {
  width: 100%;
  height: 470px;
  background-image: url("https://minisitios.ripley.cl/minisitios/estatico/dermo-cosmetica/assets3/img/1_header/headera-desk.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}

h1 {
  text-align: center;
}
.subtext_header {
  text-align: center;
}

.button_scroll {
  text-decoration: none;
  color: unset;
}

.links {
  text-decoration: none;
  color: unset;
}

.container_piel {
  display: flex;
  justify-content: space-evenly;
}

.container_piel_acne {
  background-color: #fff5e7;
  max-width: 1200px;
  margin: auto;
  padding-bottom: 35px;
  padding-top: 35px;
}

.container_piel_grasa,
.container_piel_sensible,
.container_piel_envejecimiento {
  max-width: 1200px;
  margin: auto;
  padding-bottom: 35px;
  padding-top: 35px;
}

.tipo_piel {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: auto;
}

.tipo_piel h2 {
  font-weight: 900;
  font-size: 48px;
  text-align: center;
  margin-bottom: 20px;
}

.tipo_piel p {
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}

.piel_mixta,
.piel_seca,
.piel_grasa,
.piel_normal {
  height: 460px;
  display: flex;
  cursor: pointer;
  position: relative;
  width: 25%;
  transition: all 0.5s ease;
}

.piel_mixta:hover,
.piel_seca:hover,
.piel_grasa:hover,
.piel_normal:hover {
  background-color: #f5f5f5;
  filter: brightness(100%);
  transform: scale(1.02);
}

.imagen_piel_mixta img,
.imagen_piel_seca img,
.imagen_piel_grasa img,
.imagen_piel_normal img {
  width: 100%;
}

.imagen_piel_mixta p,
.imagen_piel_seca p,
.imagen_piel_grasa p,
.imagen_piel_normal p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}

.imagen_piel_mixta h3,
.imagen_piel_seca h3,
.imagen_piel_grasa h3,
.imagen_piel_normal h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 29px;
  text-align: center;
}

.ver_mas {
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: center;
  text-decoration: none;
  color: #000;
}

.ver_mas_1 {
  padding-bottom: 20px;
}

.icono_simple_1 {
  width: 40px;
  height: 40px;
  position: relative;
  left: 14%;
  bottom: 20px;
}

.icono_simple_2 {
  width: 40px;
  height: 40px;
  position: relative;
  left: 37%;
  bottom: 20px;
}

.icono_simple_3 {
  width: 40px;
  height: 40px;
  position: relative;
  left: 60%;
  bottom: 20px;
}

.icono_simple_4 {
  width: 40px;
  height: 40px;
  position: relative;
  left: 83%;
  bottom: 20px;
}

.icono_simple_1 img,
.icono_simple_2 img,
.icono_simple_3 img,
.icono_simple_4 img {
  width: 100%;
}

.productos_piel,
.productos_piel_2,
.productos_piel_3,
.productos_piel_4 {
  display: flex;
  flex-direction: column;
  max-width: 1300px;
  background-color: #ffe9e9;
  margin: auto;
  padding-bottom: 30px;
  margin-top: 30px;
}

.logo_limpieza,
.logo_hidratar,
.logo_tratar,
.logo_proteger {
  background-image: url(https://minisitios.ripley.cl/minisitios/estatico/guia_de_compras_dermo/assets3/img/2_tipos\ de\ piel/4_iconos_piel/icono-limpieza.png);
  height: 200px;
  width: 100px;
  background-repeat: no-repeat;
}

.logo_hidratar {
  background-image: url(https://minisitios.ripley.cl/minisitios/estatico/guia_de_compras_dermo/assets3/img/2_tipos\ de\ piel/4_iconos_piel/icono-hidratar.png);
}

.logo_tratar {
  background-image: url(https://minisitios.ripley.cl/minisitios/estatico/guia_de_compras_dermo/assets3/img/2_tipos\ de\ piel/4_iconos_piel/icono-tratar.png);
}

.logo_proteger {
  background-image: url(https://minisitios.ripley.cl/minisitios/estatico/guia_de_compras_dermo/assets3/img/2_tipos\ de\ piel/4_iconos_piel/icono-proteger.png);
}

.producto_limpieza img,
.producto_tratar img,
.producto_hidratar img,
.producto_proteger img,
.producto_bonus img {
  width: 100%;
}

.producto_limpieza,
.producto_tratar,
.producto_hidratar,
.producto_proteger,
.producto_bonus {
  transition: all 0.5s ease;
  cursor: pointer;
}

.producto_limpieza:hover,
.producto_tratar:hover,
.producto_hidratar:hover,
.producto_proteger:hover,
.producto_bonus:hover {
  filter: brightness(100%);
  transform: scale(1.1);
}

.show {
  display: flex;
  opacity: 2;
  transition: 1s;
}

.activeSelectorPiel {
  background-color: #fff5e7;
}

.hidden {
  display: none;
  opacity: 0;
  transition: 2s;
}

#titulos_productos_piel h2 {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 43px;
  letter-spacing: 0em;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 100px;
}

#titulos_productos_piel h2 span {
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: 43px;
  letter-spacing: 0em;
  text-align: center;
}

.container_tratar {
  text-align: center;
}


.boton_ver_piel{

  text-align: center !important;
}

.producto_limpieza,
.producto_tratar,
.producto_hidratar,
.producto_proteger,
.producto_bonus {
  height: 200px;
  width: 200px;
  margin: 5px;
}

.limpieza,
.tratar,
.hidratar,
.proteger,
.bonus {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
  margin-top: 50px;
}

.subtext_piel p {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: center;
}
.subtext_piel p span {
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: center;
}

.ver_piel_mixta,
.ver_piel_seca,
.ver_piel_grasa,
.ver_piel_normal {
  width: 208px;
  height: 36px;
  color: black;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  background-color: white;
  border-radius: 9px;
  border: white;
  cursor: pointer;
}

.ver_piel_mixta:hover,
.ver_piel_seca:hover,
.ver_piel_grasa:hover,
.ver_piel_normal:hover {
  background-color: whitesmoke;
}

.titulo_recuerda h2 {
  margin-top: 75px;
  text-align: center;
  font-size: 47px;
  font-style: normal;
  font-weight: 700;
  line-height: 43px;
  letter-spacing: 0em;
}

.titulo_recuerda p {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: center;
  padding-top: 10px;
}

.container_recuerda {
  max-width: 1200px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 80px;
}

.imagen_recuerda {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  width: 100%;
}

.img_recuerda1,
.img_recuerda2,
.img_recuerda3,
.img_recuerda4 {
  margin: 10px;
  width: 25%;
}

.img_recuerda1 img,
.img_recuerda2 img,
.img_recuerda3 img,
.img_recuerda4 img {
  width: 100%;
}

.titulo_combatir {
  text-align: center;
  max-width: 1400px;
  margin: auto;
}

.titulo_combatir h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 900;
  line-height: 58px;
  letter-spacing: 0em;
  text-align: center;
  margin-bottom: 25px;
}

.titulo_combatir p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
  padding: 0 230px;
}

.iconos_piel img {
  width: 70px;
  margin-left: 40px;
  margin-right: 40px;
}

.iconos_piel {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
  margin-top: 25px;
}

.texto_piel_sensible,
.texto_tendencia_acne,
.texto_envejecimiento {
  display: flex;
  max-width: 1200px;
  margin: auto;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 50px;
}

.p_sensible_1,
.p_sensible_2,
.p_acne1,
.p_acne2,
.envejecimiento1,
.envejecimiento2 {
  width: 42%;
  margin: 5px;
}

.p_sensible_1 h3,
.p_sensible_2 h3,
.p_acne1 h3,
.p_acne2 h3,
.envejecimiento1 h3,
.envejecimiento2 h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: left;
}

.p_sensible_1 p,
.p_sensible_2 p,
.p_acne1 p,
.p_acne2 p,
.envejecimiento1 p,
.envejecimiento2 p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}

.owl-nav {
  height: 10px;
}

.carousel1,
.carousel2,
.carousel3 {
  max-width: 1000px;
  margin: auto;
}

.ver_todo {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: black;
}

.container_marcas {
  max-width: 1200px;
  margin: auto;
  margin-top: 70px;
}

.titulo_nuestras_marcas {
  text-align: center;
  font-family: "Montserrat";
}

.titulo_nuestras_marcas h1 {
  margin-bottom: 10px;
  font-size: 48px;
  font-style: normal;
  font-weight: 900;
  line-height: 58px;
}

.titulo_nuestras_marcas p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.nuestras_marcas {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.imagen_marcas {
  width: 13%;
}

.imagen_marcas img {
  width: 100%;
}

.alimentos_basicos {
  background-color: #ffe9e9;
  margin: auto;
  margin-bottom: 50px;
  padding: 0 30px 30px 30px;
  max-width: 1400px;
}

.titulo_alimentos {
  margin-bottom: 30px;
}

.titulo_alimentos1 h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 900;
  line-height: 46px;
  letter-spacing: 0em;
  text-align: center;
  padding-top: 35px;
}

.titulo_alimentos p {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: center;
}

.texto_alimentos {
  max-width: 885px;
  margin: auto;
}

.texto_alimentos p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
}

.imagen_alimentos img {
  width: 100px;
  height: 100px;
}

.imagen_alimentos {
  display: flex;
  justify-content: space-evenly;
  margin-top: 60px;
}

.hr1 {
  width: 200px;
  margin: auto;
  margin-top: 30px;
}

.owl-carousel .owl-nav button.owl-next {
  width: 50px;
  height: 50px;
  position: relative;
  top: -100px;
  right: -94%;
  cursor: pointer;
}

.owl-carousel .owl-nav button.owl-prev {
  width: 50px;
  height: 50px;
  position: relative;
  top: -100px;
  left: -6%;
  cursor: pointer;
}

.nav-btn.prev-slide img {
  width: 50px;
}

.nav-btn.next-slide img {
  width: 50px;
}

.texto_oliva,
.texto_palta,
.texto_pepinos,
.texto_arandanos {
  text-align: center;
  padding: 0 5px 0 5px;
}

.imagen_alimentos_1,
.imagen_alimentos_2,
.imagen_alimentos_4,
.imagen_alimentos_5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.owl-carousel .owl-item img {
  width: 70%;
  height: auto;
  margin: auto;
}

@media (max-width: 768px) {
  .guia_compras {
    height: 325px;
    background-image: url(https://minisitios.ripley.cl/minisitios/estatico/dermo-cosmetica/assets3/img/1_header/headera-mob.jpg);
  }

  .productos_piel,
  .productos_piel_2,
  .productos_piel_3,
  .productos_piel_4 {
    margin-top: 0;
  }

  .tipo_piel h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: 41px;
  }

  .tipo_piel p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .subtext_piel p {
    font-size: 22px;
  }
  #titulos_productos_piel h2 {
    margin-bottom: 60px;
  }

  .container_piel {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .icono_simple_1 img,
  .icono_simple_2 img,
  .icono_simple_3 img,
  .icono_simple_4 img {
    display: none;
  }

  .piel_mixta,
  .piel_seca,
  .piel_grasa,
  .piel_normal {
    padding: 0;
    width: 50%;
  }

  .piel_mixta img,
  .piel_seca img,
  .piel_grasa img,
  .piel_normal img {
    width: 90%;
  }

  .p_sensible_1 h3,
  .p_sensible_2 h3,
  .p_acne1 h3,
  .p_acne2 h3,
  .envejecimiento1 h3,
  .envejecimiento2 h3 {
    padding-bottom: 10px;
    font-size: 29px;
    padding-top: 20px;
  }

  .titulo_combatir h2 {
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 20px;
  }

  .titulo_combatir p {
    padding: 0 60px;
  }

  .iconos_piel {
    margin-bottom: 0px;
  }

  .iconos_piel img {
    width: 50px;
  }

  .iconos_piel h3 {
    font-size: 15px;
    text-align: center;
  }

  .logo_limpieza,
  .logo_hidratar,
  .logo_tratar,
  .logo_proteger {
    display: none;
  }

  #titulos_productos_piel h2 {
    font-size: 28px;
  }

  #titulos_productos_piel h2 span {
    font-size: 28px;
  }

  .p_sensible_1,
  .p_sensible_2,
  .p_acne1,
  .p_acne2,
  .envejecimiento1,
  .envejecimiento2 {
    width: 90%;
  }

  .p_sensible_1 p,
  .p_sensible_2 p,
  .p_acne1 p,
  .p_acne2 p,
  .envejecimiento1 p,
  .envejecimiento2 p {
    font-size: 15px;
    text-align: justify;
  }

  .imagen_recuerda {
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .titulo_nuestras_marcas h1 {
    line-height: 30px;
    font-size: 34px;
  }

  .titulo_nuestras_marcas p {
    font-size: 18px;
    line-height: 22px;
  }

  .texto_piel_sensible,
  .texto_tendencia_acne,
  .texto_envejecimiento {
    padding-bottom: 0px;
  }

  .texto_oliva,
  .texto_palta,
  .texto_pepinos,
  .texto_arandanos {
    width: 80%;
    text-align: center;
    padding: 0;
  }

  .alimentos_basicos {
    padding: 0;
  }

  .imagen_alimentos_1,
  .imagen_alimentos_2,
  .imagen_alimentos_4,
  .imagen_alimentos_5 {
    width: 50%;
    padding-bottom: 20px;
  }
  .imagen_alimentos {
    flex-wrap: wrap;
  }

  .imagen_alimentos img {
    width: 60px;
    height: 60px;
  }

  .img_recuerda1,
  .img_recuerda2,
  .img_recuerda3,
  .img_recuerda4 {
    width: 50%;
    margin: 0;
  }

  .img_recuerda1 img,
  .img_recuerda2 img,
  .img_recuerda3 img,
  .img_recuerda4 img {
    width: 90%;
    margin-left: 9px;
  }

  .carousel1,
  .carousel2,
  .carousel3 {
    max-width: 80%;
  }

  .owl-carousel .owl-nav button.owl-next {
    top: -75px;
    right: -95%;
  }

  .owl-carousel .owl-nav button.owl-prev {
    left: -12%;
    top: -75px;
  }

  .carousel1,
  .carousel2,
  .carousel3 {
    padding-top: 32px;
  }

  .texto_alimentos {
    max-width: 90%;
  }

  .titulo_alimentos1 h2 {
    padding-top: 40px;
  }
}

.ver_mas_1 {
  position: absolute;
  bottom: -1%;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  padding-bottom: 15px;
}

@media (max-width: 600px) {
  .guia_compras {
    height: 200px;
  }

  .tipo_piel h2 {
    font-size: 23px;
  }

  .tipo_piel p {
    font-size: 12px;
    padding: 0 5px 0 5px;
  }

  .iconos_piel img {
    width: 40px;
  }

  .iconos_piel h3 {
    font-size: 12px;
  }
  .icono_simple_1,
  .icono_simple_2,
  .icono_simple_3,
  .icono_simple_4 {
    display: none;
  }

  .subtext_piel p {
    font-size: 15px;
    line-height: 20px;
    width: 83%;
    margin: auto;
  }

  .piel_mixta,
  .piel_seca,
  .piel_grasa,
  .piel_normal {
    height: 380px;
  }

  .p_sensible_1 h3,
  .p_sensible_2 h3,
  .p_acne1 h3,
  .p_acne2 h3,
  .envejecimiento1 h3,
  .envejecimiento2 h3 {
    font-size: 20px;
    padding-top: 0;
  }

  .container_piel_grasa,
  .container_piel_sensible,
  .container_piel_envejecimiento {
    padding-bottom: 0;
  }

  .limpieza,
  .tratar,
  .hidratar,
  .proteger,
  .bonus {
    flex-wrap: wrap;
  }

  .producto_limpieza,
  .producto_tratar,
  .producto_hidratar,
  .producto_proteger,
  .producto_bonus {
    width: 35%;
    margin-bottom: 10px;
    height: auto;
  }

  .logo_limpieza,
  .logo_hidratar,
  .logo_tratar,
  .logo_proteger {
    display: none;
  }

  .titulo_recuerda h2 {
    font-size: 30px;
    margin-top: 25px;
  }

  .titulo_recuerda p {
    font-size: 17px;
    padding-top: 5px;
  }

  .titulo_combatir {
    width: 90%;
  }

  .titulo_combatir h2 {
    font-size: 19px;
  }
  .titulo_combatir p {
    font-size: 14px;
    padding: 0;
  }

  .carousel1,
  .carousel2,
  .carousel3 {
    max-width: 80%;
    padding-top: 30px;
  }

  .owl-carousel .owl-nav button.owl-next {
    top: -75px;
    right: -78%;
  }

  .owl-carousel .owl-nav button.owl-prev {
    top: -75px;
    left: -13%;
  }

  .container_piel_acne {
    padding-bottom: 0;
  }

  .titulo_nuestras_marcas h1 {
    line-height: 30px;
    font-size: 36px;
  }

  .titulo_nuestras_marcas p {
    font-size: 17px;
    line-height: 22px;
  }

  .imagen_marcas {
    width: 25%;
  }

  .titulo_alimentos1 h2 {
    font-size: 40px;
  }

  .titulo_alimentos p {
    font-size: 25px;
  }

  .texto_palta p,
  .texto_oliva p,
  .texto_pepinos p,
  .texto_arandanos p {
    font-size: 12px;
  }
}