/* Fonts: ARS Maquette Pro - Light and Regular */

@font-face {
  font-family: 'ARS Maquette Pro';
  src: url('/static/fonts/ARSMaquettePro-Light.woff2') format('woff2'),
       url('/static/fonts/ARSMaquettePro-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ARS Maquette Pro';
  src: url('/static/fonts/ARSMaquettePro-Regular.woff2') format('woff2'),
       url('/static/fonts/ARSMaquettePro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


    .scrolling-wrapper {
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .scrolling-wrapper::-webkit-scrollbar {
      display: none;
    }
    #graficoConsumo {
      max-width: 100%;
      height: 250px !important;
    }
    .iti {
      width: 100%;
    }
    .iti__flag-container {
      padding: 0 8px;
    }
    input[type="tel"] {
      font-size: 1rem;
      height: 3rem;
      border-radius: 0.5rem;
      border: 1px solid #d1d5db;
      padding-left: 52px !important;
      width: 100%;
    }
    @keyframes pulseBg {
      0% { background-position: left top; }
      100% { background-position: right bottom; }
    }
      @keyframes pulseGradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .animate-gradient {
      background-size: 200% 200%;
      animation: pulseGradient 15s ease infinite;
    }
    
    .dot-loader span {
    display: inline-block;
    animation: bounce 1s infinite ease-in-out;
  }

  @keyframes bounce {
    0%, 80%, 100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }

  .dot-loader span:nth-child(1) {
    animation-delay: -0.32s;
  }
  .dot-loader span:nth-child(2) {
    animation-delay: -0.16s;
  }
  .dot-loader span:nth-child(3) {
    animation-delay: 0;
  }


   body { font-family: 'ARS Maquette Pro', system-ui, sans-serif; }

#animated-background {
  background-image: url("/static/Assets/foto1.jpg");
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out both;
}


/* Altamira Color Palette */

:root {
  --color-white:        #F4F4EF;
  --color-blue-light:   #AAD5FC;
  --color-blue:         #3A75FF;
  --color-blue-dark:    #0F1720;
  --color-green-soft:   #BBE7BE;
  --color-yellow-soft:  #FFF2B2;
  --color-purple-soft:  #D7D0FF;
}

/* Utility Classes */
.bg-blue     { background-color: var(--color-blue); }
.bg-blue-dark { background-color: var(--color-blue-dark); }
.bg-green     { background-color: var(--color-green-soft); }
.bg-yellow    { background-color: var(--color-yellow-soft); }
.bg-purple    { background-color: var(--color-purple-soft); }
.bg-light     { background-color: var(--color-white); }

.text-blue     { color: var(--color-blue); }
.text-blue-dark { color: var(--color-blue-dark); }
.text-green    { color: var(--color-green-soft); }
.text-yellow   { color: var(--color-yellow-soft); }
.text-purple   { color: var(--color-purple-soft); }
.text-light    { color: var(--color-white); }

.border-blue   { border-color: var(--color-blue); }
.border-light  { border-color: var(--color-white); }