.fade-in {
      animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(10px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Ocultar scrollbar pero mantener funcionalidad */
  .hide-scroll::-webkit-scrollbar {
      display: none;
  }

  .hide-scroll {
      -ms-overflow-style: none;
      scrollbar-width: none;
  }

  .tab-btn.active {
      border-bottom: 2px solid #873f5b;
      background-color: #a89f8c;
      color: white;
      font-weight: 700;
  }

  /* Estilo para inputs del formulario */
  .form-input {
      width: 100%;
      background-color: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 0.375rem;
      padding: 0.75rem 1rem;
      margin-top: 0.25rem;
      outline: none;
      transition: border-color 0.2s;
  }

  .form-input:focus {
      border-color: #111111;
      background-color: #ffffff;
  }

  /* Configuración Base de la animación */
  .reveal {
      opacity: 0;
      /* Empieza invisible */
      transition: all 0.8s ease-out;
      /* Duración y suavidad */
  }

  /* ESTADOS INICIALES (Desde dónde viene) */
  .from-bottom {
      transform: translateY(50px);
  }

  .from-top {
      transform: translateY(-90px);
  }

  .from-left {
      transform: translateX(-100px);
  }

  .from-right {
      transform: translateX(100px);
  }

  /* ESTADO FINAL (Cuando es visible) */
  .reveal.active {
      opacity: 1;
      transform: translate(0, 0);
      /* Vuelve a su posición original */
  }
  
  
  
  .form-input:invalid {
        border-color: #dc2626;
    }
    
    .fecha-deshabilitado {
        background-color: #f3f4f6;
        color: #9ca3af;
    }
    
    
    /* Para navegadores que soportan :disabled en input date */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

input[type="date"]:invalid {
    border-color: #dc2626;
}

/* Esto funciona en algunos navegadores para deshabilitar visualmente */
input[type="date"] option:disabled {
    background-color: #f3f4f6;
}

@media (max-width: 680px) {
    #TxtNosotros, #TxtTrabajamos, #TxtEnElMunicipio, #TxtDefinimos {
        color: #fff !important;
        text-shadow: 0px 0px 35px rgba(37,37,37,0.75) !important;
    }
}