body{
  font-family:'Poppins',sans-serif;
  background:#fafafa;
  padding-top:80px;
}

/* LOADER */
#loader{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:9999;
  transition:opacity .6s ease;
}
#loader.hidden{
  opacity:0;
  pointer-events:none;
  display:none !important; /* === FIX DEL ESPACIO EN MOBILE === */
}
.loader-spinner{
  width:48px;
  height:48px;
  border:5px solid #ddd;
  border-top-color:#111;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* HERO */
.hero{
  padding:160px 0 80px;
  background:#fff;
}
.hero-text p{max-width:650px}

/* SKILLS */
.badge.skill{
  background:#111;
  color:#fff;
  padding:8px 14px;
  border-radius:20px;
  font-size:14px;
}

/* SECTIONS */
.section{
  padding: 30px 0;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media(max-width:992px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
  .grid{grid-template-columns:1fr;}
}

/* REVEAL ANIMATIONS */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:all .7s ease;
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

/* RESPONSIVE HERO */
@media(max-width:768px){
  .hero{
    padding:120px 20px 60px;
    text-align:center;
  }
  h1.display-5{font-size:1.9rem;}
  .hero-text p{margin:auto}
  .skills-row{justify-content:center !important;}
}

/* Buttons */
.btn-dark{
  background:#111 !important;
  border:none;
}

/* Cards */
.card{
  border:none;
  border-radius:12px;
  transition:all .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 18px rgba(0,0,0,.12);
}

/* ===== MOBILE FIX ===== */
@media (max-width: 576px) {

  body {
    padding-top: 40px !important;
  }

  /* HERO reducido */
  .hero {
    padding: 70px 0 30px !important;
  }

  .hero-inner {
    gap: 10px !important;
  }

  h1.display-5 {
    margin-bottom: 10px !important;
  }

  .hero-text p {
    margin-bottom: 10px !important;
  }

  /* Secciones más compactas */
  .section {
    padding: 20px 0 !important;
  }

  /* Grids */
  .grid {
    gap: 14px !important;
  }

  /* Cards */
  .card {
    padding: 16px !important;
  }

  .skills-row {
    margin-top: 10px !important;
  }
}


@media (max-width: 576px) {
  #cursos.section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}