* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #1a191a;
}
@font-face {
  font-family: BravenRegular;
  src: url(../fonts/BravenRegular.ttf);
}
@font-face {
  font-family: JuliaMonoLight;
  src: url(../fonts/JuliaMono-Light.ttf);
}
html {
  background-image: url(../img/noise.webp);
  scroll-behavior: smooth;
}
body {
  background: #e3f2fdad;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: BravenRegular;
}
p,
a,
li {
  font-family: JuliaMonoLight;
}
.juliaMonoLight {
  font-family: JuliaMonoLight;
}
/* ============ Header ============ */
header {
  min-height: 100vh;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #1a191a;
}

/* Círculos animados */
header::before,
header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: moveCircles 15s linear infinite;
  filter: blur(60px);
}

header::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(0, 200, 255, 0.6) 0%,
    rgba(0, 200, 255, 0.3) 40%,
    rgba(0, 200, 255, 0.1) 70%,
    transparent 100%
  );
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

header::after {
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(255, 200, 0, 0.7) 0%,
    rgba(255, 200, 0, 0.4) 40%,
    rgba(255, 200, 0, 0.15) 70%,
    transparent 100%
  );
  top: 30%;
  left: -175px;
  animation-delay: -5s;
}

/* Círculos adicionales ahora generados dinámicamente con JS (ver js/circles.js) */

@keyframes moveCircles {
  0% {
    transform: translateX(-50vw);
  }
  100% {
    transform: translateX(calc(100vw + 50vw));
  }
}

header h1 {
  font-size: 8rem;
}
main {
  background: #d4001f;
  position: relative;
  min-height: 100vh;
  padding: 10vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #1a191a;
}
main h2 {
  font-size: 3rem;
}
main .lottie-servicios {
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  width: 300px;
  object-fit: contain;
  opacity: 0.5;
}
main h3 {
  font-size: 2rem;
}
main .card {
  border: 1px solid #1a191a;
  padding: 20px;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}
main .card .submit-btn {
  position: absolute;
  bottom: -100px;
  font-size: 1rem;
}
main .card:hover {
  background: #ffffff;
  color: #1a191a;
  text-align: justify;
}
main .card:hover {
  padding-bottom: 70px;
}
main .card:hover .submit-btn {
  bottom: 10px;
}

.contactanos .lottie-servicios{
  width: auto;
  height: 20vh;
}
.contactanos{
  min-height: 110vh;
  padding: 10vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #1a191a;
  
  position: relative;
}
#nosotros h2{
  font-size: 3rem;
}
#nosotros h3{
  font-size: 2rem;
}
#nosotros {
  min-height: 110vh;
  padding: 10vh 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #1a191a;
}

/* Círculos animados */
#nosotros::before,
#nosotros::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: moveCircles 15s linear infinite;
  filter: blur(60px);
}

#nosotros::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 149, 0, 0.6) 0%,
    rgba(255, 140, 0, 0.3) 40%,
    rgba(255, 128, 0, 0.1) 70%,
    transparent 100%
  );
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

#nosotros::after {
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(255, 145, 0, 0.7) 0%,
    rgba(255, 145, 0, 0.4) 40%,
    rgba(255, 200, 0, 0.15) 70%,
    transparent 100%
  );
  top: 30%;
  left: -175px;
  animation-delay: -5s;
}

#proyectos {
  min-height: 110vh;
  padding: 10vh 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #1a191a;
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
#proyectos h2{
  font-size: 3rem;
}
#proyectos h3{
  font-size: 2rem;
}

/* Clase genérica para círculos animados (generados por JS) */
.animated-circle {
  position: absolute;
  border-radius: 50%;
  animation: moveCircles 18s linear infinite;
  filter: blur(50px);
  pointer-events: none;
}
.text-justify{
  text-align: justify;
}
/* Estilo para contadores animados */
[data-counter] {
  font-weight: bold;
  color: #2196F3;
  font-size: 1.1em;
  display: inline-block;
  min-width: 3ch; /* Evita saltos de layout al contar */
}
body #magicMouseCursor {
  position: fixed;
  width: 35px;
  height: 35px;
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 9999;
  left: 0;
  top: 0;
  transition: transform .07s, width .3s, height .3s, border-color .3s ease, box-shadow .3s ease;
  pointer-events: none;
  background: transparent;
}
body #magicPointer {
  height: 5px;
  width: 5px;
  top: 0;
  left: 0;
  position: fixed;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  transition: background .3s ease, width .2s, height .2s, box-shadow .3s ease;
}

/* ============ Scrollbar personalizada ============ */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  border: 1px solid rgba(26, 25, 26, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(212, 0, 31, 0.8) 0%, 
    rgba(212, 0, 31, 0.6) 50%, 
    rgba(26, 25, 26, 0.8) 100%);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(212, 0, 31, 1) 0%, 
    rgba(212, 0, 31, 0.8) 50%, 
    rgba(26, 25, 26, 1) 100%);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(212, 0, 31, 0.3);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, 
    rgba(26, 25, 26, 1) 0%, 
    rgba(212, 0, 31, 0.9) 50%, 
    rgba(212, 0, 31, 1) 100%);
}

::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 0, 31, 0.8) rgba(255, 255, 255, 0.1);
}

/* Animación suave para el scroll con efecto de desaceleración */
html {
  scroll-behavior: auto; /* Desactivar smooth nativo para usar el nuestro */
}

/* Efecto de desaceleración personalizado */
body {
  scroll-behavior: auto; /* Desactivar smooth nativo para usar el nuestro */
  overscroll-behavior: contain;
}

/* Animación de desaceleración para el scroll - Simplificada */
@keyframes scrollDeceleration {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Clase para aplicar el efecto de desaceleración */
.scroll-decelerating ::-webkit-scrollbar-thumb {
  animation: scrollDeceleration 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efecto de rebote sutil en el scrollbar */
::-webkit-scrollbar-thumb {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Cuando se está haciendo scroll activo */
body.scrolling ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(212, 0, 31, 1) 0%, 
    rgba(212, 0, 31, 0.8) 50%, 
    rgba(26, 25, 26, 1) 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(212, 0, 31, 0.4);
}

/* Estilos adicionales para mejorar la experiencia */
body {
  scrollbar-gutter: stable;
}

.tag{
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 15px; 
  border-radius: 20px;
  width: fit-content;
  font-size: 15px;
  margin-bottom: 10px;
}
.submit-btn{
  width: fit-content;
}

@media (max-width: 1080px) {
  #nosotros .col-lg-4,
  #servicios .col-lg-4{
    margin: 20px;
  }
  
}
/*
#F0F4F8 – Gris azulado claro (fondos relajados).

#E3F2FD – Azul cielo claro (tranquilidad, confianza).

#BBDEFB – Azul pastel (amigable, accesible).

#C8E6C9 – Verde menta suave (natural, fresco).

#A5D6A7 – Verde pastel (equilibrio, calma).

#FFF9C4 – Amarillo pastel (optimismo sin saturar).

#FFECB3 – Naranja claro (cálido, social).

#FFE0B2 – Durazno suave (cercanía, amabilidad).

#F8BBD0 – Rosa claro (afectividad, amabilidad).

#E1BEE7 – Violeta pastel (creatividad, espiritualidad).
*/