/* ===========================================
   PRELOADER CON LOGO GIRANDO
   =========================================== */
.projects-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.projects-preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.projects-preloader-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.projects-preloader-logo {
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ocultar scroll mientras el preloader está activo */
body.projects-preloader-active {
  overflow: hidden;
}

/* Responsive para el preloader */
@media (max-width: 768px) {
  .projects-preloader-logo {
    width: 80px;
    height: 80px;
  }
}


 /* Tipografía Space Grotesk para todos los elementos h */
 h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", sans-serif !important;
      }
  /* Tipografía Inter para el resto del texto */
  body, p, span, div, a, li, td, th, label, input, textarea, select, button {
    font-family: "Inter", sans-serif !important;
      }
      
  /* Altura específica para banner-section solo en blog.html */
  .banner-section {
    height: 350px !important;
    min-height: 350px !important;
      }
      
  /* Capa de opacidad oscura sobre el fondo del banner */
  .banner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
          width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
      }
      
  /* Asegurar que el contenido esté por delante de la opacidad */
  .banner-section .container {
          position: relative;
    z-index: 2;
      }

      @media (max-width: 480px) {
   

        .round-52 {
  width: 32px !important;
  height: 32px;
}
  }