body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #111;
  color: #eee;

  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  h1 {
    font-size: 32px;
    text-align: center;
  }
}

/* PROGRESO DEL SCROLL */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;

  height: 4px;
  width: 0%;

  background: linear-gradient(90deg, #00ffcc, #4a8dff, #3b0072);

  z-index: 9999;

  transition: width 0.1s linear;
}

/* 🔥 H1 PRINCIPAL */
h1 {
  margin-top: 20px;

  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: 700;

  color: #00ffcc;
  background: linear-gradient(90deg, #4a8dff, #3b0072);

  padding: 16px 32px;
  border-radius: 12px;

  transition: all 0.6s ease;
}

h1:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
  cursor: pointer;
}

/* SECCIONES (GLASS + UX PRO) */
section {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 28px;

  border-radius: 16px;

  background: rgba(30, 30, 47, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

section:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 255, 204, 0.12);
  cursor: pointer;
}


/* TEXTO GENERAL */
.parrafo,
.parrafointro,
.lista,
.item {
  color: #ddd;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 28px;
}

/* 🔵 SOBRE MÍ */
.sobre-mi-section {
  background: rgba(74, 140, 255, 0.10);
  border: 1px solid rgba(74, 140, 255, 0.25);
}

/* 💡 TÍTULO SOBRE MÍ (UX PRO REAL) */
.sobre-mi-section .titulo-seccion {
  display: inline-block;

  padding: 8px 16px;
  border-radius: 10px;

  font-size: 32px;
  font-weight: 700;

  background: #080817;
  color: #00ffcc;

  animation: flotarsuave 3.5s ease-in-out infinite;

  transition: all 0.3s ease;
}

.sobre-mi-section:hover .titulo-seccion {
  transform: scale(1.08);
  color: #ffffff;
  letter-spacing: 1px;
}

/* 🎯 animación suave real UX */
@keyframes flotarsuave {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 🟣 PROYECTOS */
.proyectos {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;

  font-size: 36px;
  font-weight: 700;

  background: rgba(120, 60, 255, 0.15);
  border: 1px solid rgba(120, 60, 255, 0.3);

  color: #ffffff;

  transition: all 0.3s ease;
}

.proyectos:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(120, 60, 255, 0.25);
}

/* 🟢 HABILIDADES */
.habilidades {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;

  font-size: 36px;
  font-weight: 700;

  background: rgba(0, 255, 204, 0.12);
  border: 1px solid rgba(0, 255, 204, 0.25);

  color: #ffffff;

  transition: all 0.3s ease;
}

.habilidades:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 255, 204, 0.25);
}

/* LISTA */
ul {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 28px;

  list-style-type: square;
  text-align: left;

  color: #ddd;
}

/* FOOTER (UX MEJORADO) */
.footer {
  margin-top: 60px;
  padding: 30px 20px;

  background: rgba(30, 30, 47, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  text-align: center;
  border-radius: 16px 16px 0 0;
}

/* texto */
.footer-copy {
  font-weight: 600;
  color: #00ffcc;
  margin-bottom: 10px;
}

.footer-text {
  font-size: 14px;
  color: #bbb;
  margin-bottom: 20px;
}

/* contenedor botones */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* botones base */
.footer-links a {
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;

  transition: all 0.3s ease;
}

/* botón email */
.btn-contact {
  background: linear-gradient(90deg, #00ffcc, #007a66);
  color: #111;
}

.btn-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 255, 204, 0.25);
}

/* botón linkedin */
.btn-linkedin {
  background: linear-gradient(90deg, #4a8dff, #3b0072);
  color: #fff;
}

.btn-linkedin:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(74, 141, 255, 0.25);
}

footer:hover {
  transform: translateY(-3px);
}

/* LINKS */
a {
  color: #00ffcc;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* 🌊 SCROLL REVEAL UX PRO */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* contenedor skill */
.skill {
  margin: 18px 0;
  text-align: left;
}

.skill span {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #ddd;
}

/* barra base */
.bar {
  width: 100%;
  height: 12px;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;

  overflow: hidden;
}

/* progreso animado */
.progress {
  height: 100%;
  width: 0;

  border-radius: 10px;

  transition: width 1.2s ease;
}

/* colores por skill */
.html {
  background: linear-gradient(90deg, #ff6b6b, #ff3d3d);
}

.css {
  background: linear-gradient(90deg, #4a8dff, #3b0072);
}

.github {
  background: linear-gradient(90deg, #00ffcc, #007a66);
}

.js {
  background: linear-gradient(90deg, #ffd000, #ff9900);
}

/* cuando aparece en scroll */
.reveal.active .html {
  width: 90%;
}

.reveal.active .css {
  width: 85%;
}

.reveal.active .github {
  width: 70%;
}

.reveal.active .js {
  width: 40%;
}