* {
  margin: 0;
  padding: 0;
  height: auto;
  /* transition: all 0.8s ease;*/
} 

*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --trending: #cf4e63;
  --blue: #3a9da0;
  --grey: #f2f2f2;
  --white500: rgba(255, 255, 255, 0.5);
  --black: rgba(0, 0, 0, 0.45);
  --bg: #f4f4f4;
 --hover: #ff7289;

  font-size: 16px;
  /* cursor: url("/img/cursor.svg"), auto; */
}

@font-face {
  font-family: antonio;
  src: url(../fonts/Antonio-Bold.otf);
}

@font-face {
  font-family: neue;
  src: url(../fonts/PPNeueMontreal-Book.otf);
}

@font-face {
  font-family: neueB;
  src: url(../fonts/PPNeueMontreal-Bold.otf);
}

@font-face {
  font-family: neueM;
  src: url(../fonts/PPNeueMontreal-Medium.otf);
}

@font-face {
  font-family: editorial;
  src: url(../fonts/PPEditorialNew-Italic.otf);
}
p {
  padding: 2% 0;
}

article.inicio {
  padding-bottom: 5%;
}
.red {
  color: var(--trending);
}

nav#header {
  display: flex;
}

nav {
  display: none;
}
body {
  background: var(--bg);
  transition: all 0.3s ease;
  /* cursor: url("/img/cursor.svg"), auto; */
  font-family: neue;
  font-size: 20px;
  margin: 0;
  max-width: 100vw;
  height: max-content;
  overflow-x: hidden;
}
.editorial {
  font-family: editorial!important;
  text-transform:none!important;
}
.antonio {
  font-family: antonio;
}
button,
a {
  transition: all 0.3s ease;
  /* cursor: url("/img/cursorpointer.svg"), auto !important; */
}
a {
  text-decoration: none;
  color: inherit;
}

.textoizquierda {
  text-align: right;
}
.textocentro {
  text-align: center;
}

/* header*/
header {
  display: flex;
  flex-direction: row;
  /* gap: 3vw; */
  align-items: center;
  padding: 2%;
  /* justify-content: space-between; */
}
img.logo {
  width: 5vw;
  margin: 2vh 3vw;
}
nav ul {
  display: flex;
  flex-direction: row;
  gap: 3vw;
  list-style-type: none;
  margin-bottom: 0;
  background-color:var(--grey);
  background-color:#f2f2f282;
  padding: 20px 50px;
margin-right: 1vw;
font-family: neueM;

  li {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.8rem;
    
  }
  li:hover {
    color: var(--trending);
  }
}

/* eyestamp*/
#eyeliners{
    .logoeyestamp {
    padding: 3%;
}
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.subtitle {
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 1.8rem;
  padding: 1.3vh 0;
}

.descripcion {
  display: flex;
  flex-direction: row;
  gap: 30%;
  font-size: 1rem;
  align-items: center;
}
.minititulo {
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 5px;
  display: flex;
  strong {
    font-family: neueB;
  }
}
.destacadocentro {
  display: flex;
  align-items: center;
  font-size: 2rem;
}
.titulo.editorial {
  font-size: 15rem;
  line-height: 15rem;
}
.container.eyeliner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img.eyeliner.horizontal {
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  height: fit-content;
}
.destacado {
  font-size: 1.5rem;
  line-height: 1.5rem;
  vertical-align: middle;

  .editorial {
    font-size: 2.3rem;
  }
}

article.negro {
  display: flex;
  padding: 0;
  flex-direction: row;
  align-items: center;
  background-color: #000000;
  color: white;
  overflow: hidden;
  .logoeyestamp img {
    filter: invert(100%);
    width: 50%;
    position: absolute;
    right: 5vh;
  }
  img.eyeliner {
    max-height: 70vh;
    padding: 10vh;
  }
  .minititulo {
    position: absolute;
    bottom: 7vh;
  }
  .logoeyestamp .minititulo {
    position: absolute;
    bottom: 10vh;
    right: 5vw;
  }
  .logoeyestamp .destacado {
    padding-top: 5vh;
  }
  .hover {
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    color: #000000;
  }
  .hover:hover {
    opacity: 1;
  }
  .descripcion {
    flex-direction: column;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}
.movex {
  transform: translateX(1rem);
}

/*tarjetas*/

.cambioacontainerswiper {
  display: flex;
  padding: 0;
  flex-direction: row;
  align-items: center;
  background-color: #000000;
  color: white;
  overflow: hidden;
  width: 100%;
}
.container.negrosmall,
.container.negromedium {
  background: #4c4c4c;
  background-position: top center;
  background-size: 130%;
  padding: 2%;
}
.container.negrosmall:hover,
.container.negromedium:hover {
  background-position: top center;
  background-size: 110%;
  img {
    opacity: 0;
    translate: 0 -15%;
  }
}
.container.negrosmall:hover {
  background-image: url("../img/aplicacion_black_samll.jpg");
  background-size: cover;
}
.container.negromedium:hover {
  background-image: url("../img/aplicacion_black_medium.jpg");
  background-size: cover;
}

article.colores {
  display: flex;
  position: relative;

}

.container.verde,
.container.azul,
.container.marron {
  background-position: center center;
  background-size: 130%;
  padding: 2%;
  padding-bottom: 10vh;

}
.container.verde {
  background: #00a560;
}
.container.azul {
  background: #0066c8;
}
.container.marron {
  background: #8c5c34;
}
.container.verde:hover,
.container.azul:hover,
.container.marron:hover {
  background-position: center center;
  background-size: 100%;
  img {
    opacity: 0;
    translate: 0 -15%;
  }
}
.container.verde:hover {
  background-image: url("../img/aplicacion_verde.jpg");
}
.container.azul:hover {
  background-image: url("../img/aplicacion_azul.jpg");
}
.container.marron:hover {
  background-image: url("../img/aplicacion_marron.jpg");
}
.colores .destacado {
  width: 100vw;
  position: absolute;
  display: flex;
  bottom: 5vh;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
  .editorial {
    position: relative;
    font-size: 3rem;
    padding-left: 1%;
  }
}
/* usos*/
.hoverm .editorial {
  font-size: 10rem;
  position: absolute;
  bottom: 0;
}

article.uso {
  display: flex;
 flex-direction: column-reverse;
  
}
article.uso .usos {
  display: flex;
  color: white;
}

.container.uso1,
.container.uso2,
.container.uso3,
.container.uso4 {
  background-position: center center;
  background-size: 130%;
  padding: 2%;
  padding-bottom: 10vh;
  height: 90vh;
}
.container.uso1 {
  background-image: url("../img/modouso0.jpg");
}
.container.uso2 {
  background-image: url("../img/modouso1.jpg");
}
.container.uso3 {
  background-image: url("../img/modouso2.jpg");
}
.container.uso4 {
  background-image: url("../img/modouso3.jpg");
}

.uso .numero {
  position: absolute;
  color: #0000009e;
  font-size: 35rem;
  bottom: 90px;
  right: -16%;
  line-height: 21rem;
}

.uso .destacado {
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  color: white;
  padding: 2% 5%;
  text-transform: uppercase;
  background: black;
  gap: 10px;
}

.uso .hover,
.uso .hoverm {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  bottom: 0;
}
.uso .hover:hover,
.uso .hoverm:hover {
  background: linear-gradient(
    181deg,
    rgb(220 255 255 / 0%) 0%,
    rgba(201, 219, 219, 1) 100%
  );
}

.hidden {
  /* display:none;*/

  opacity: 0;
}
.showed {
  display: flex;
}

.containergrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0;
  grid-auto-rows: minmax(100px, auto);
  img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}

/* footer*/

footer {
  color: white;
  background-color: black;
  letter-spacing: 5px;
  font-size: 0.8rem;
  .container {
    max-width: 100%;
    padding: 2% 5% !important;
        text-transform: uppercase;
  }

  ul {
    li {
      list-style: none;
      padding-top: 2vh;
    }
  }
  .container:first-child {
    border-bottom: 1px solid white;
  }

  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding: 1rem 0 0;
  }
}

/* sponges */
#sponges {
  
  .container {
    height: 85vh;
  }
  .container.velvetpage{
    height: 100vh;

  }
  .inicio {
    .logofondo {
      top: 10vh;
      z-index: -2;
    }
    .esponjas {
      position: fixed;
      z-index: -1;

      img {
        height: 80vh;
        position: absolute;
      }
      img.velvet {
        left: 25vw;
        top: -12vh;
      }
      img.maxi {
        left: 43vw;
        top: -8vh;
      }
    }
    .descripcion {
      gap: 50%;
      width: 100%;
    }

    .minititulo {
      font-size: 1rem;
      display: block;
      padding-top: 2vh;
    }
  }
  .sponge .destacado {
    position: absolute;
    bottom: 10%;
  }
  .container.sponge1 {
    background-image: url(../img/liquido.jpg);
  }
  .container.sponge2 {
    background-image: url(../img/crema.jpg);
  }
  .container.sponge3 {
    background-image: url(../img/mousse.jpg);
  }
  .container.sponge4 {
    background-image: url(../img/polvo.jpg);
  }
  .hoverm .editorial {
    font-size: 8rem;
    letter-spacing: -10px;
  }
  .hoverm .minititulo {
    bottom: 20%;
  }
  .container.liquido1 {
    background-image: url(../img/modoempleo_humeda.jpg);
  }
  .container.liquido2 {
    background-image: url(../img/modoempleo_humeda2.jpg);
  }
  .container.liquido3 {
    background-image: url(../img/modoempleo_humeda3.jpg);
  }
  .container.liquido4 {
    background-image: url(../img/modoempleo_humeda4.jpg);
  }
  .container.polvo1 {
    background-image: url(../img/mododeusosponge_polvo.jpg);
  }
  .container.polvo2 {
    background-image: url(../img/mododeusosponge_polvo2.jpg);
  }
  .container.polvo3 {
    background-image: url(../img/mododeusosponge_polvo3.jpg);
  }
  .container.polvo4 {
    background-image: url(../img/mododeusosponge_polvo4.jpg);
  }
}
/* index */
#chica .container {
  height: 95vh;
}
#chica .izquierda {
  left: -15vw;
}

.chica {
  img.chicafoto {
    height: 150vh;
    position: fixed;
    top: -31vh;
    right: 0;
    z-index: -1;
  }
  .destacado {
    position: absolute;
    z-index: -2;
  }
  .destacado .titulo {
  font-size: 2rem;
        letter-spacing: 2rem;
        position: absolute;
        top: -180px;
        left: 30%;
        text-transform: uppercase;
  }
  .destacado .editorial {
    font-size: 40rem;
    letter-spacing: -2.5rem;
  }
}
.eyestampsection {
  .eyeliner img {
    height: 100%;
  }
  h2,p {
    padding: 0;
    margin: 0;
    color:white;
    display:inline;font-size: 1.5rem;
}
  /* .romboscolores img {
    height: 50%;
  } */
  ul {
    list-style: none;
    color:white;
    li {
      font-family: antonio;
      padding: .5rem;
      font-size: 3rem;
      text-align:left;
      margin-left:-5rem;
                  display: flex;
            flex-direction: row-reverse;
      img {
        margin-left: -2rem;
        z-index:-1;
        border:5px solid white;
      }
    }
  }
  .destacado{
    padding:2rem 0;
    color:white;
    margin-top:3vh;
  }
}



/* velvet */

#velvet, #maxi{
    .imgprod{
        width: auto;
        height: 80vh;
    }
    .descripcion{
        text-transform: uppercase;
        letter-spacing: 2px;
        

    }
   .container{
margin-left:-10vw;
    }
}


/* about */
#about{
    background-color:var(--grey);
    .rowman{
        gap:5vw;
    }
    .container{
        width: 100vw;
        max-width: none!important;
        margin:0;
        padding:15%;
    }
    .marca{
        position:relative;
       
    }
    .texto{
         padding-left:5vw;
        border-left: 1px solid var(--trending);
    }
    .minititulo{
        text-align: right; 
        position:relative;
                display: flex;
        flex-direction: column;
        
      }
    .titulo{
        font-size: 15rem;
        letter-spacing:-10px;
    }
}

.logoblanco{
    filter: brightness(10);
    max-width:40vw;}
    .blanco{
    filter: brightness(10);
    }
.rowman {
  display: flex;
  flex-direction: row;

  gap: 3rem;
}
.columman {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.padding10 {
  padding: 10%;
}
.mitadvh {
  height: 50vh;
}
.borderman {
  border: 1rem solid white;
  padding: .5rem;
  margin: 1rem;
}
.boton {
  color: white;
  text-transform: uppercase;
  letter-spacing: 10px;
  background-color: var(--trending);
  padding: 20px 50px;
  margin-top: 1rem;
  font-size:small;
  width: fit-content;
}
.boton:hover {
background-color: var(--hover);
}
.separator{
  height: 50vh;
  width: 100%;
}

.legales.container {

 align-items: flex-start;



}

.oculto{
  opacity:0;
}
.visible
{opacity:1}

.chicaeyestampnegro,.chicaeyestampazul,.chicaeyestampverde,.chicaeyestampmarron{mix-blend-mode: multiply;}

.romboscolores.columman {
      border: 5px white solid;
    padding: 1%;
    background-color: #ffffff5e;
    align-items: center;
    /* gap: 10px; 
    height: 110%;*/

      a img:hover {


    transform: rotate(-0.15turn) scale(0.8);
    transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
      }

      .destacadoeyeliner, .destacadosponges{
         h2,p,h1 {
    padding: 0;
    margin: 0;

    display:inline;
    font-size: 1.5rem;
    text-transform:none;
}
      }