body {

  margin: 0;

  background: black;
  color: white;

  font-family: 'Poppins', sans-serif;

  overflow-x: hidden;
}
.container {

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 40px;

  box-sizing: border-box;
}


/* =========================
   SPLASH SCREEN
========================= */

#welcome-screen {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: black;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

#welcome-text {

  color: white;

  font-size: 3rem;
  font-weight: 600;

  opacity: 0;

  transition: opacity 0.5s ease;
}

#welcome-text.show {
  opacity: 1;
}

#welcome-screen.hide {

  opacity: 0;

  transition: opacity 0.5s ease;

  pointer-events: none;
}


/* =========================
   HERO
========================= */

.hero {

  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 40px;

  box-sizing: border-box;
}


/* CONTENIDO HERO */

.hero-content {

  width: 100%;
  
}


/* TEXTO PRINCIPAL */

.hero-text {

  display: flex;
  flex-direction: column;

  align-items: flex-start;
}


/* TITULO */

.hero h1 {

  font-size: clamp(3rem, 8vw, 6rem);

  margin: 0;

  font-weight: 600;

  letter-spacing: -2px;
}


/* =========================
   LINEA + TEXTO
========================= */

.line-container {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 28px;
}

.line {

  width: 120px;
  height: 4px;

  background: #1f1f1f;

  border-radius: 20px;

  position: relative;

  overflow: hidden;
}

.line-selector {

  position: absolute;

  width: calc(100% / 3);
  height: 100%;

  background: white;

  border-radius: 20px;

  transition: transform 0.4s ease;
}


/* TEXTO CAMBIANTE */

.changing-text {

  font-size: 1.2rem;
  font-weight: 300;

  color: #bdbdbd;

  transition: opacity .3s ease;
}

/* =========================
   FILOSOFÍA
========================= */

.philosophy {

  margin-top: 30px;

  padding-left: 24px;

  border-left: 2px solid #1f1f1f;

  max-width: 800px;
}

.philosophy p {

  color: #bdbdbd;

  line-height: 1.9;

  font-size: 1.05rem;
}

/* =========================
   REDES SOCIALES
========================= */

.socials {

  display: flex;

  justify-content: left;
  align-items: left;

  gap: 40px;

  margin-top: 40px;
}

.socials a {

  color: #8a8a8a;

  font-size: 2rem;

  text-decoration: none;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.socials a:hover {

  color: white;

  transform: translateY(-3px);
}


/* =========================
   CONTENIDO
========================= */

.content {

  width: 90%;
  max-width: 1000px;

  margin: auto;

  padding-top: 80px;

}

.content h2 {

  font-size: 2rem;
}

.content p {

  color: #bdbdbd;

  line-height: 1.7;
}

/* =========================
   TITULOS DE SECCIÓN
========================= */

.section-title {

  margin-top: 100px;
}


/* =========================
   PROYECTOS
========================= */

.project {

  margin-top: 40px;

  padding-left: 24px;

  border-left: 2px solid #1f1f1f;
}

.project h3 {

  margin: 0;

  font-size: 1.3rem;

  font-weight: 500;
}

.project p {

  margin-top: 12px;

  color: #9a9a9a;

  line-height: 1.7;

  max-width: 700px;
}

/* =========================
   TECNOLOGÍAS
========================= */

.tech-stack {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 30px;
}


.tech-stack span {

  padding: 12px 20px;

  border: 1px solid #1f1f1f;

  border-radius: 999px;

  background: #0f0f0f;

  color: #d1d1d1;

  font-size: 0.95rem;

  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease;
}


.tech-stack span:hover {

  border-color: #3a3a3a;

  color: white;

  transform: translateY(-2px);
}



/* =========================
   CARRUSEL PROYECTOS
========================= */

.project-carousel {

  display: flex;

  gap: 24px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  padding-bottom: 10px;

  margin-top: 30px;
}


/* scrollbar elegante */

.project-carousel::-webkit-scrollbar {

  height: 8px;
}

.project-carousel::-webkit-scrollbar-track {

  background: #111;

  border-radius: 20px;
}

.project-carousel::-webkit-scrollbar-thumb {

  background: #2a2a2a;

  border-radius: 20px;
}


/* imágenes */

.project-carousel img {

  flex: 0 0 60%;

  max-width: 60%;

  border-radius: 24px;

  border: 1px solid #1f1f1f;

  scroll-snap-align: center;

  object-fit: cover;

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}


/* hover elegante */

.project-carousel img:hover {

  transform: scale(1.01);
}
/* =========================
   FOOTER
========================= */

.footer {

  margin-top: 140px;

  padding: 40px 0;

  border-top: 1px solid #1a1a1a;
}

.footer p {

  color: #6f6f6f;

  font-size: 0.95rem;

  text-align: center;

  letter-spacing: 0.5px;
}