/* RESET */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:;
}

/* HERO */

.banner{
  position:relative;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SLIDES CONTAINER */

.slides{
  position:absolute;
  inset:0;
}

/* CADA IMAGEN */

.slide{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  opacity:0;

  transform:scale(1);

  transition:
    opacity 2s ease,
    transform 8s ease;

  will-change:transform, opacity;
}

/* IMÁGENES */

.slide:nth-child(1){
  background-image:url("../img/hogar-valencia-portada-1.jpg");
}

.slide:nth-child(2){
  background-image:url("../img/piso-propiedades-valencia.jpg");
}

.slide:nth-child(3){
  background-image:url("../img/casa-3.jpg");
}

.slide:nth-child(4){
  background-image:url("../img/img-8.jpg");
}

.slide:nth-child(5){
  background-image:url("../img/casa-4.jpg");
}

/* ACTIVA */

.slide.active{
  opacity:1;
  transform:scale(1.08);
}

/* OVERLAY OSCURO */

.overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.55)
    );

  z-index:1;
}

/* CONTENIDO */

.banner-content{
  position:relative;
  z-index:2;

  max-width:1000px;

  text-align:left;

  color:white;

  padding:20px;

  animation:fadeUp 1.5s ease;
}

.banner-content h1{
  display: block;
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height:1.1;
  margin-bottom:20px;
  font-weight:700;
}

.banner-content p{
  font-size:clamp(1rem, 2vw, 1.3rem);
  line-height:1.7;
  opacity:.95;
}

/* ENTRADA TEXTO */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MÓVIL */

@media(max-width:768px){

  .banner-content h1{
    font-size:2.5rem;
  }

  .banner-content p{
    font-size:1rem;
  }

}
.hero-title{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  font-size:clamp(2.5rem, 6vw, 5rem);
  line-height:1.1;
  font-weight:700;

  max-width:1000px;
}

.hero-title span{

  opacity:0;

  transform:translateY(80px);

  display:inline-block;

  animation:letterAnimation .6s forwards;
}

/* RETARDO LETRA POR LETRA */

.hero-title span:nth-child(1){animation-delay:0.05s;}
.hero-title span:nth-child(2){animation-delay:0.1s;}
.hero-title span:nth-child(3){animation-delay:0.15s;}
.hero-title span:nth-child(4){animation-delay:0.2s;}
.hero-title span:nth-child(5){animation-delay:0.25s;}
.hero-title span:nth-child(6){animation-delay:0.3s;}
.hero-title span:nth-child(7){animation-delay:0.35s;}
.hero-title span:nth-child(8){animation-delay:0.4s;}
.hero-title span:nth-child(9){animation-delay:0.45s;}
.hero-title span:nth-child(10){animation-delay:0.5s;}
.hero-title span:nth-child(11){animation-delay:0.55s;}
.hero-title span:nth-child(12){animation-delay:0.6s;}
.hero-title span:nth-child(13){animation-delay:0.65s;}
.hero-title span:nth-child(14){animation-delay:0.7s;}
.hero-title span:nth-child(15){animation-delay:0.75s;}
.hero-title span:nth-child(16){animation-delay:0.8s;}
.hero-title span:nth-child(17){animation-delay:0.85s;}
.hero-title span:nth-child(18){animation-delay:0.9s;}
.hero-title span:nth-child(19){animation-delay:0.95s;}
.hero-title span:nth-child(20){animation-delay:1s;}
.hero-title span:nth-child(21){animation-delay:1.05s;}
.hero-title span:nth-child(22){animation-delay:1.1s;}
.hero-title span:nth-child(23){animation-delay:1.15s;}
.hero-title span:nth-child(24){animation-delay:1.2s;}
.hero-title span:nth-child(25){animation-delay:1.25s;}
.hero-title span:nth-child(26){animation-delay:1.3s;}
.hero-title span:nth-child(27){animation-delay:1.35s;}
.hero-title span:nth-child(28){animation-delay:1.4s;}
.hero-title span:nth-child(29){animation-delay:1.45s;}
.hero-title span:nth-child(30){animation-delay:1.5s;}
.hero-title span:nth-child(31){animation-delay:1.55s;}
.hero-title span:nth-child(32){animation-delay:1.6s;}
.hero-title span:nth-child(33){animation-delay:1.65s;}
.hero-title span:nth-child(34){animation-delay:1.7s;}
.hero-title span:nth-child(35){animation-delay:1.75s;}
.hero-title span:nth-child(36){animation-delay:1.8s;}
.hero-title span:nth-child(37){animation-delay:1.85s;}

/* ANIMACIÓN */

@keyframes letterAnimation{

  to{
    opacity:1;
    transform:translateY(0);
  }

}
.hero-title{
  text-shadow:0 5px 30px rgba(0,0,0,.35);
}
.hero-title{
  margin:0;
  letter-spacing:-3px;
  display:block;
}
.hero-title .word{
  display: inline-block;
  white-space: nowrap;
}