html{
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *::before, *::after{
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body{
    font-size: 1.6rem;
    margin: 0;
    overflow-x: hidden;  
    overflow-y: auto;
    background-color: white;
}

:root{
  --titulos: 'Fjalla One', sans-serif;
  --parrafos: 'Playfair Display', serif;
}

h1, h2, h3{
   font-family: var(--titulos);
}

p{
    font-family: var(--parrafos);
}

.header{
  padding: 3rem 4rem;
  position:relative;
}

header{
  text-align: center;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:10;
  margin-top:120px;
}

.nav a{
  text-decoration:none;
  color:#777;
  letter-spacing:1px;
}

.nombre h1{
  font-family:'Cinzel', serif;
  text-align:center;
  font-size:30px;
  color:rgb(236,152,166);
  letter-spacing:6px;
  font-weight:800;
  margin-top:80px;
}
.nombre{
  position:relative;
  z-index:2;
}

.marca,
.marca:visited,
.marca:link{
  font-family:'Cinzel', serif;
  font-size:2.8rem;
  color:rgb(236,152,166);
  text-decoration:none;
  font-weight:700;

  position:absolute;
  right:40px;
  bottom:40px;
}
.marca2{
  font-family:'Cinzel', serif;
  font-size:2.8rem;
  color:rgb(236,152,166);
  text-decoration:none;
  font-weight:700;
  margin-top:10px;
}
.marca3{
  font-family:'Cinzel', serif;
  font-size:2.8rem;
  color:rgb(236,152,166);
  text-decoration:none;
  font-weight:700;
  display:block;
  margin-bottom:30px;
}

.firma{
  font-family:'Cinzel', serif;
  font-size:2.8rem;
  color:rgb(236,152,166);
  margin:5px 0;
  text-decoration:none;
}

.hero{
  margin-top:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  position:relative;
}

.visual-wrapper{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.video-principal{
  width:100%;
  max-width:500px;
  z-index:2;
  border-radius:4px;
}

.tribales{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  pointer-events:none;
  transform:translate(-17px,-25px);
    z-index:1;
}

.tribal{
  width:50%;
  display:block;
   margin:-5px auto 40px auto;
}

.decoracion{
  position:absolute;
  top:0;
  width:45%;
  max-width:none;
  opacity:0;
  transition:transform 1s ease, opacity 1s ease;
}

.decoracion.revelar{
  opacity:1;
}

.decor-izq{
  left:0;
  transform:translateX(-200px);
}

.decor-izq.revelar{
  transform:translateX(0);
}

.decor-der{
  right:0;
  transform:translateX(200px) scaleX(-1);
}

.decor-der.revelar{
  transform:translateX(0) scaleX(-1);
}

.about{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:120px 80px;
  min-height:100vh;
}

.about-texto{
  width:50%;
  font-size:1.9rem;
  line-height:1.7;
  margin:2px 0;
  letter-spacing:1.5px;
  color:#777;
}

.about-foto{
  width:40%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(-40px);
}

.about-foto img{
  max-width:320px;
  margin-bottom:15px;
}

.roles{
  margin-top:5px;
  font-size:1rem;
  text-align:center;
}

.roles p{
  margin:2px 0;
  font-size:1.2rem;
  letter-spacing:1.5px;
  color:#777;
}

.texto{
  margin-top:30px;
  margin-bottom:60px;
}

.texto p{
  font-size:20px;
  max-width:650px;
  margin:0 auto;
  line-height:1.6;
}

.contacto{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:60px 0;
}

.boton{
  text-decoration:none;
  border:1px solid #555;
  padding:20px 50px;
  border-radius:40px;
  color:#777;
  font-size:19px;
  letter-spacing:2px;
  transition:all 0.8s ease;

  opacity:0;
  transform:translateY(-120px) rotate(-8deg);
  animation:caerArtistico 1.2s cubic-bezier(.17,.67,.3,1.3) forwards;
}

.boton:nth-child(2){
  animation-delay:0.4s;
}

.boton:hover{
  background-color:rgb(236,152,166);
  color:white;
  transform:scale(1.05);
}

@keyframes caerArtistico{

  60%{
    opacity:1;
    transform:translateY(20px) rotate(2deg);
  }

  80%{
    transform:translateY(-5px) rotate(-1deg);
  }

  100%{
    opacity:1;
    transform:translateY(0) rotate(0);
  }

}


.galeria{
  display:flex;
  gap:30px;
  padding:40px;
  width:max-content;
  animation:mover 40s linear infinite;
}

#archivo{
  overflow:hidden;
}

.escena{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:320px;
}

.escena video{
  height:50vh;
  width:100%;
  object-fit:cover;
  border-radius:18px;
}

.escena p{
  margin-top:15px;
  color:#444;
  font-size:14px;
  text-align:center;
}

.galeria:hover{
  animation-play-state:paused;
}

@keyframes mover{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}

@media (max-width:768px){

  .about{
    flex-direction:column;
    text-align:center;
  }

  .about-texto{
    width:100%;
    margin-bottom:50px;
  }

  .about-foto{
    width:100%;
  }

}

.footer{
  text-align:center;
  padding:40px 0;
  color:#777;
  font-size:14px;
}
#archivo{
  position:relative;
  overflow:hidden;
  padding-bottom:120px;
}

#contacto{
  position:relative;
  text-align:center;
  padding-top:80px;
}