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

body {
  background: #070707;
  font-family: "Montserrat", sans-serif;
  color: white;
}

.page {
  width: 100%;
  height: 100dvh;
  position: relative;
  padding: 3vw;
}

/* Texto principal */
.title {
  font-size: clamp(56px, 10vw, 180px);
  font-weight: 700;
  letter-spacing: -2px;
}

/* Redes sociales */
.social {
  position: absolute;
  right: 3vw;
  bottom: 3vw;
  display: flex;
  gap: 1.5vw;
}

.social a {
  opacity: 0.7;
  transform: translateY(0);
  transition: 
    transform 0.25s ease,
    opacity 0.25s ease;
}

.social a:hover {
  opacity: 1;
  transform: translateY(-3px);
}


.social img {
  width: 2vw;
  height: 2vw;
  display: block;
}


/* Estado inicial */
.title,
.social {
  opacity: 0;
  transform: translateY(10px);
}

/* Animación */
.fade-in {
  animation: fadeUp 1.2s ease forwards;
}

.fade-in-delay {
  animation: fadeUp 1.2s ease forwards;
  animation-delay: 0.6s;
}

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


@media (max-width: 768px) {

    .page {
  padding: 10vw;
}

   .title {
  font-size: clamp(60px, 16vw, 210px);
}

.social {
  position: absolute;
  right: 10vw;
  bottom: 10vw;
  gap: 18px;
}

.social img {
  width: 7vw;
  height: 7vw;
  display: block;
}

}

/* Selección global */
::selection {
  background: #ACD3BC;
  color: #070707; /* texto oscuro para buen contraste */
}

/* Para compatibilidad con Firefox */
::-moz-selection {
  background: #ACD3BC;
  color: #070707;
}